Question

我对由require js加载的knockout js组件有一个奇怪的问题。该组件非常简单。

define([
    'jquery',
    'knockout'
], function ($, ko) {


    function ViewModel(params) {
        var self = this;
        this.test = 'test';
    }

    ViewModel.prototype.fetchData = function() {
        var self = this;
        console.log(this.test);
    };

    ViewModel.prototype.init = function() {
        console.log(this.test);
        this.fetchData();
    };

    ko.components.register('my-component', {
        viewModel: ViewModel,
        template: '<span data-bind="template: { afterRender: init }"></span>'
    });

});

现在，模板绑定能够调用视图模型 init 方法，但此方法本身无法访问 fetchData 方法，因为在方法中，此绑定到Window对象而不是视图模型。

我准备了一个小提示来显示错误案例：http://jsfiddle.net/ask4artur/3f6jsa4m/47/

Answer 1

我相信淘汰赛并未自动在afterRender的此上下文中调用$data方法。您可以$data将this设置为bind，如下所示：

data-bind="template: { afterRender: init.bind($data) }

var i = 0;

var ViewModel = function() {
   this.nr = "Instance " + i++; 
}

ViewModel.prototype.logNr = function() {
    console.log(this.nr);
};

ko.components.register('test', {
    viewModel: ViewModel,
    template: '<div data-bind="template: { name: \'testTemplate\', afterRender: logNr.bind($data) }"></div>'
});

ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="component: {name: 'test'}"></div>
<div data-bind="component: {name: 'test'}"></div>
<div data-bind="component: {name: 'test'}"></div>
<div data-bind="component: {name: 'test'}"></div>
<div data-bind="component: {name: 'test'}"></div>


<script type="text/html" id="testTemplate">
  <div data-bind="text: nr, click: logNr"></div>
</script>

丢失由requirejs加载的knockout.js组件中的视图模型上下文

1 个答案: