knockout.js：バインディングを更新しますか？

Question

私はko.applyBindings（）の後に新しい要素をDOMに注入します。ノックアウトはこれらの新しい要素を認識しません。 これはなぜ起こっているのか理解できます。ノックアウトでインデックス化されていないだけです。

最初は、新しい要素を追加した後にko.applyBindings（）を呼び出すだけで解決できると思っていましたが、ko.applyBindings（）呼び出しごとに、複数回発砲。したがって、5回適用した後、クリック：バインディングが5回実行されるので、これは望ましい解決策ではありません）。

ko.updateBindings（）など何かがあります。要素バインディングを更新しますか？

挨拶、 クリス

Answer 1

あなたは全体のDOMバインディングのために検査されko.applyBindings起動するたびに。結果として、これを複数回実行すると、各要素に対して複数のバインディングが取得されます。あなただけの新しいDOM要素をバインドしたい場合は、applyBindings関数へのパラメータとして、この要素を渡すことができます：あなたがしているもの知らず

Can you call ko.applyBindings to bind a partial view?

Answer 2

：

ko.applyBindings(viewModelA, document.getElementById("newElement")); 

この関連の質問を参照してくださいまあまあ、あなたはこれについて間違った方向に行っているようです。あなたのビューはあなたのビューモデルによって駆動されるべきです。したがって、ノックアウトバインディングを適用する必要があるDOM要素を直接追加するべきではありません。

代わりに、ビューの変更を反映するようにビューモデルを更新する必要があります。変更すると、新しい要素が表示されます。

たとえば、$('body').append('<a href="#" data-bind="click: something">Click me!</a>');の場合、ボタンを表示するときにDOM要素を追加するのではなく、ビューモデルを使用してボタンの表示を制御します。

だからあなたのビューモデルは

var viewModel = { clickMeAvailable: ko.observable(false) } 

が含まれており、あなたのHTMLは、あなたはその後、ちょうどviewModel.clickMeAvailable(true)

<a href="#" data-bind="click: something, visible: clickMeAvailable">Click me!</a> 

私をクリックするボタンが利用可能なアプリケーションの状態の変更をあるよう

が含まれています。

ノックアウトの大きな部分は、ビジネスロジックとプレゼンテーションを分離することです。だから私をクリックして私がボタンを含むことを気にしないコードを私をクリックしてください。私がクリックすると、更新はviewModel.clickMeAvailableになります。

たとえば、フォームを有効に入力したときに利用できる保存ボタンがあります。観察可能なビューモデルformValidへの保存ボタンの可視性を結びつけます。

しかし、フォームを有効にした後に変更することにした場合、保存する前に合意しなければならない合意が表示されます。フォームのロジックは変更されません。フォームが有効な場合はまだformValidに設定されています。 formValidが変更されたときに起こることを変更するだけです。

lassombraがこの回答のコメントに指摘しているように、直接的なDOM操作が最善のアプローチである場合があります。たとえば、必要に応じてビューの一部だけを水和したい複雑な動的ページです。しかし、あなたはこれを行うことによってノックアウトが提供する懸念の分離のいくつかをあきらめています。このトレードオフを検討している場合は注意してください。

Answer 3

私は長い時間前に尋ねたことは知っていますが、私はちょうど同様の問題を偶然見つけました。私は新しい要素をコンテナに追加しようとし、それらにonclick関数を与えようとしました。 最初にあなたがしたことを試して、さらにアプローチを試みたColinErecommended。

HTML：：

<div id="workspace" data-bind="foreach:nodeArr, click:addNode"> 
<div class="node" data-bind="attr:{id:nodeID},style:{left:nodeX,top:nodeY},text:nodeID, click:$parent.changeColor"></div> 
</div> 

はJavaScript：

<script> 
function ViewModel() { 
var self = this; 
var id = 0; 
self.nodeArr = ko.observableArray(); 
self.addNode = function (data, event) { 
    self.nodeArr.push({ 
     'nodeID': 'node' + id, 
     'nodeX' : (event.offsetX - 25) + 'px', 
     'nodeY' : (event.offsetY - 10) + 'px' 
    }) 
    id++; 
} 
self.changeColor = function(data, event){ 
    event.stopPropagation(); 
    event.target.style.color = 'green'; 
    event.target.style.backgroundColor = 'white'; 
} 
} 
ko.applyBindings(new ViewModel()); 
</script> 

のことができます。これは私が私のために完璧にworkesれ、SamStephensアプローチを試してみましたが、それを思い付いたように、私のための実用的なソリューションではありませんでしたそれで遊んでJS Fiddleを作りました。 これはまだ誰かを助けることを願っています。