Fatal编程技术网
  • javascript/
  • Javascript 在敲除组件中丢失上下文

Javascript 在敲除组件中丢失上下文

javascript knockout.js

Javascript 在敲除组件中丢失上下文,javascript,knockout.js,knockout-mapping-plugin,knockout-3.0,knockout-components,Javascript,Knockout.js,Knockout Mapping Plugin,Knockout 3.0,Knockout Components,我使用requirejs将组件打包为单个AMD模块，如下示例： 问题在于，在调用viewmodel中的函数时添加单击事件时，self属性不包含viewmodel并将其指向窗口。是什么导致了这个问题？顺便说一句，如果它们是在没有requirejs的情况下加载的，并且它们是内联的，那么这个问题就不会发生 Index.html： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

我使用requirejs将组件打包为单个AMD模块，如下示例：

问题在于，在调用viewmodel中的函数时添加单击事件时，self属性不包含viewmodel并将其指向窗口。是什么导致了这个问题？顺便说一句，如果它们是在没有requirejs的情况下加载的，并且它们是内联的，那么这个问题就不会发生

Index.html：

     <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dipping your feet into KnockoutJS Components</title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">KO Components</a>
            </div>
        </div>
    </div>
    <div class="container body-content" style="padding-top:50px">
        <h2>Dipping your feet into KnockoutJS Components</h2>
        <hr />
        <greeter params='name: " Sumit!"'></greeter>
        <greeter params='name: " Optimus!"'></greeter>
        <greeter params='name: " Bumblebee!"'></greeter>
    </div>
    <footer class="navbar navbar-fixed-bottom">
        <div class="container-fluid">
            <p> &copy; 2014 - Still Learning</p>
        </div>
    </footer>
    <script src="App/boot/require.config.js"></script>
    <script data-main="App/boot/startup" src="Scripts/require/require.js"></script>
</body>
</html>
startup.js

定义（['jquery'，'knockout'，'bootstrap']，函数（$，ko）{

greeting.html-组件模板

 <div class='container-fluid'>
    <div> Hello <span data-bind='text: greeting'></span></div>
    <div> It is <span data-bind='text: date'></span></div>

    <input type="button" value="test" data-bind="click: testClick" />
  </div>
JavaScript编译器尝试对闭包进行智能处理。由于函数不使用闭包中的任何变量，因此函数根本不包含闭包。将代码更改为此，您将看到它是有效的：

    self.testClick = function () {
        console.log(self);
        debugger;
    };
你能发布完整的代码并添加重现问题所需的代码吗？顺便说一句，代码在github上唯一的变化是在组件viewmodel中添加了一个click函数，并在组件template中使用它。mmh-你没有将任何viewmodel传递给ko.applyBindings（），不确定这是否有效…请尝试至少放置一个空文本{}我有一个更复杂的例子，我将viewmodel传递到ApplyBings函数，但它仍然存在相同的问题。这就是我发现问题的原因。我尝试只输入空文本以确保它仍然无法解决问题。我注意到的另一个问题是，在html和requirejs中都存在引用敲除。您应该删除引用如果你使用的是requirejs，请参考html中的ko。引导和jqueryReally奇怪。我知道我昨天尝试了console.log的东西，但无法获取viewmodel上下文。今天早上，当我尝试放置console.log时，viewmodel中的上下文就在那里。谢谢你的帮助：）真奇怪！我当然无法解释这一点。 
 <div class='container-fluid'>
    <div> Hello <span data-bind='text: greeting'></span></div>
    <div> It is <span data-bind='text: date'></span></div>

    <input type="button" value="test" data-bind="click: testClick" />
  </div>

    function greeterViewModel(params) {
        var self = this;
        self.greeting = ko.observable(params.name);
        self.date = ko.observable(new Date());

        self.testClick = function () {
            //self is pointing to window instead of greeterViewModel
            debugger;
        };
    }
    return { viewModel: greeterViewModel, template: greeterTemplate };
});

    self.testClick = function () {
        console.log(self);
        debugger;
    };