複数のコンポーネントインスタンス

Question

支援フィドル結合カスタムのコールバックをオーバーライド：私は2つの構成要素を有し、それぞれがそのテンプレートに（button）カスタム結合噴射https://jsfiddle.net/lezhnev_dmitriy/5Lvq1nra/

$(function(){ 
 

 
// when DOM ready 
 

 
ko.bindingHandlers.button = { 
 
    init: function (element, valueAccessor, allBindings) { 
 
        this.onClick = valueAccessor(); 
 
        $(element).html('<button data-bind="click: onClick">Click</button>'); 
 
       }, 
 
    update: function (element, valueAccessor, allBindings) { 
 
       }, 
 
}; 
 

 
ko.components.register('comp1', { 
 
\t template: '<div>component instance <span data-bind="text: instance_id"></span> <span data-bind="button: handleClick"></span></div>', 
 
    viewModel: function() { 
 
    var self = this; 
 
    self.instance_id = ko.observable(Math.round(Math.random() * 1000)); // debug purpose 
 

 
    self.handleClick = function() { 
 
     alert('clicked at ' + self.instance_id()); 
 
    }.bind(this); // very interesting hint! 
 
    } 
 
}); 
 

 
ko.applyBindings(); 
 

 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<comp1></comp1> 
 
<comp1></comp1>

を。次に、そのバインディングにコールバックをアタッチします。 最後のバインディングのみが機能します（両方のボタンが最後のコンポーネントインスタンスを介して処理されるようになりました）。

何か不足していますか？

UPDATE： 私はこのコードは実際に私の意見では

ko.bindingHandlers.button = { 
 
       init: function (element, valueAccessor, allBindings) { 
 
        var self = this; 
 
        self.onClick = valueAccessor(); 
 
        $(element).html('<button>Click</button>'); 
 
        $('button', element).click(self.onClick); 
 
       }, 
 
       update: function (element, valueAccessor, allBindings, viewModel_deprecated, bindingContext) { 
 
        var self = this; 
 

 
       }, 
 
      }; 
 

 
      ko.components.register('comp1', { 
 
       template: '<div>component instance <span data-bind="text: instance_id"></span> <span data-bind="button: handleClick"></span></div>', 
 
       viewModel: function() { 
 
        var self = this; 
 
        self.instance_id = ko.observable(Math.round(Math.random() * 1000)); // debug purpose 
 

 
        self.handleClick = function() { 
 
         console.log('clicked at ' + self.instance_id()); 
 
        }.bind(this); // very interesting hint! 
 
       } 
 
      }); 
 
      
 
ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<comp1></comp1> 
 
<comp1></comp1>

Answer 1

を動作することが判明、あなたはbindingHandlerのコード内のDOMノードを変更することになっていません。 私たちはその理由のためにテンプレートを持っています。

<script id="buttonTemplate" type="text/html"> 
    <button data-bind="click: handleClick">Click</button> 
</script>  

template: '<div>component instance <span data-bind="text: instance_id"></span> <span data-bind="template: {name: \'buttonTemplate\', data: $data }"></span></div>', 

私はあなたのフィドルを更新しました：https://jsfiddle.net/5Lvq1nra/2/

編集：テンプレートのデータプロパティに$データを渡すと、本当にちょうどあなたのようにオブジェクトを渡すことができます表示するには、（デフォルト）は必要ありませんモデル。