requirejsによってロードされたknockout.jsコンポーネントのビューモデルコンテキストが失われる

Question

require jsによってロードされたノックアウト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メソッドにアクセスすることはできませんビューモデルではなくウィンドウオブジェクト。

私はエラーケースを表示するにはフィドルを準備：http://jsfiddle.net/ask4artur/3f6jsa4m/47/

Answer 1

私はノックアウトが自動的$dataのこのコンテキストでafterRenderメソッドを呼び出すことはありません信じてい。あなたはそのようなbindを使用してthisとして$data設定することができます。

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>