剔除組件中缺少上下文

Question

在以下示例中，我使用requirejs將組件打包為單個AMD模塊： https : //github.com/sumitkm/BuildingSpaUsingKO/tree/Part2

問題是，當它在viewmodel中調用該函數時添加click事件時，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>

require.config.js

var require = {
baseUrl: "/",
paths: {
    "bootstrap": "Scripts/bootstrap/bootstrap",
    "jquery": "Scripts/jquery/jquery-1.9.0",
    "knockout": "Scripts/knockout/knockout-3.2.0beta.debug",
    "text": "Scripts/require/text"
},
shim: {
    "bootstrap": {
        deps: ["jquery"]
    }
}
}

startup.js

define（['jquery'，'knockout'，'bootstrap']，function（$，ko）{

    ko.components.register('greeter', { require: 'App/components/greeter/greeting' });


    ko.applyBindings();
});

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>

greeting.js-組件視圖模型

define（[[“ nockout”，“ text！./ greeting.html”]，函數（ko，greeterTemplate）{

    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 };
});

Answer 1

JavaScript編譯器嘗試對閉包保持精明。 因為您的函數不使用閉包中的任何變量，所以該函數根本不包括閉包。 將代碼更改為此，您將看到它起作用：

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

剔除組件中缺少上下文

問題描述

1 個解決方案

解決方案1
4 已采納 2015-10-14 23:59:37

剔除組件中缺少上下文

問題描述

1 個解決方案

解決方案1 4 已采納 2015-10-14 23:59:37

解決方案1
4 已采納 2015-10-14 23:59:37