なぜ私の動的ボタンがknockoutjsで無効になっていませんか？

Question

なぜ私のダイナミックボタンがknockoutjsを使って無効にされているのかわかりませんか？

オリジナル取り組んでダイナミックHTMLとはknockoutjs：進行中のLink1
仕事：Link2

var viewModel = { 
    first: ko.observable("Bob"), 
    last: ko.observable("Smith"), 
    isEnabled: ko.observable("disabled") 
}; 

viewModel.fullName = ko.dependentObservable(function() { 
    return this.first() + " " + this.last(); 
}, viewModel); 

function addDynamicContent() { 
    $("#main").append("<div id='dynamic' data-bind='text: fullName'></div><input id='Button1' type='button' value='Hello World' data-bind='disabled=isEnabled' />"); 

    ko.applyBindings(viewModel, $("#dynamic")[0]); 
} 

ko.applyBindings(viewModel); 

Answer 1

結合無効のためのあなたのデータバインド構文は、あなたの追加HTMLで間違っている、とのあなたの再適用バインディングはあまり正しくありません。

する必要がありますあなたの

isEnabled: ko.observable("disabled") 

ブール値を使用して観察可能な有効/無効を変更：

isEnabled: ko.observable(true) 

はあなたの追加マークアップ

$("#main").append("<div id='dynamic' data-bind='text: fullName'></div><input id='Button1' type='button' value='Hello World' data-bind='disabled=isEnabled' />"); 

で無効データバインド構文を修正

は次のようになります。

$("#main").append("<div id='dynamic' data-bind='text: fullName'></div><input id='Button1' type='button' value='Hello World' data-bind='disable: isEnabled' />"); 

は

ko.applyBindings(viewModel, $("#dynamic")[0]); 

再結合し、全体のviewmodelにあなたのバインディングアップデートを変更次のようになります。

ko.cleanNode($("#main")[0]); 
ko.applyBindings(viewModel); 

Updated JSFiddle。

これはサンプルを機能させることになりますが、動的コンテンツを使用している場合は、HTMLを追加して毎回バインドをやり直すのではなく、いくつかの追加バインディングを使用することを強くおすすめします。 Observable arrays、template binding、working with collectionsをご覧ください。

もう1つのJS Fiddle exampleは、上記のバインディングを使用した動的コンテンツとバインディングの別のアプローチを示しています。