ノックアウトオプションの選択は、非表示/非表示の後で再初期化されます

Question

ノックアウトのオプションを使用してバインドすると、選択要素を隠して再度表示するときに期待していない動作が見られます。

リストでオプションを選択すると、オブザーバブルに正しい値が与えられます。しかし、select html項目を非表示にしてから再び表示させると、前に選択した値が失われます。

私は、次のHTMLテンプレート使用しています私のテストのために

：あなたはjsfiddleに私の例でこれをテストすることができ

var ViewModel = function() { 
    this.visible = ko.observable(true); 
    this.options = ko.observableArray([ 
    {name: 'A', value: 'A00'}, 
    {name: 'B', value: 'A01'}, 
    {name: 'C', value: 'A02'}, 
    ]); 

     this.selectedItem = ko.computed({ 
     read: function() { 
     console.log("reading value"); 
     }, 
     write: function (newSelection) { 
     console.log("setting value:" + newSelection.value); 
     } 
    }); 
}; 

ko.applyBindings(new ViewModel()); 

と組み合わせて

Visible: <input type="checkbox" data-bind="checked: visible" /> 
<!-- ko 'if': visible --> 
<select data-bind="options: options, optionsText: 'name', value: selectedItem"></select> 
<!-- /ko --> 

を： http://jsfiddle.net/5wZQ2/169/

値（リストのBなど）を選択すると、オブザーバブルは値を取得します。表示を非表示にして選択ボックスを非表示にしてから再び表示させると、選択した値が失われ、リストの最初の項目に再初期化されます。

誰でもこの現象を説明できますか？

Answer 1

あなたはバッキングフィールドを欠いている、計算への選択を結合しているので、UIは、その状態を保存するための方法はありません。通常は、観測可能なストアに現在選択されている値があり、計算結果はバッキングフィールドとUIの間のデータに対して何らかの変換を実行するためにのみ使用されます。

observableを追加して、その値を計算結果に渡すと、selectはその状態を保存し、削除されてから最後の値に再バインドされ、 'if'バインディングによって再追加されます。観察可能な保存された値で初期化されます。

this._selectedItem = ko.observable(); 

this.selectedItem = ko.computed({ 
    read: function() { 
     console.log("reading value"); 
     return this._selectedItem(); 
    }, 
    write: function (newSelection) { 
     console.log("setting value:" + newSelection.value); 
     this._selectedItem(newSelection); 
    } 
}, this); 

あなたの例では、実際に計算されたすべてを使用する理由はありません。あなたは代わりにプレーンオブザーバブルにバインドすることができます。

その後

this.selectedItem = ko.observable(); 

あなたはまだあなたが観測可能で購読方法を使用することができ、コンソールへの変更をログに記録したい場合。

this.selectedItem.subscribe(function(newSelection){ 
    console.log("setting value:" + newValue); 
}); 

Answer 2

可視バインドにifバインディングを変更すると、予期される動作が発生します。ここであなたの更新されたフィドルを見てください。 http://jsfiddle.net/5wZQ2/171/

Visible: <input type="checkbox" data-bind="checked: visible" /> 
<div data-bind="visible: visible"> 
<select data-bind="options: options, optionsText: 'name', value: selectedItem"></select> 
</div> 

私は違いが見え結合と同様の役割を果たしている場合

を述べた文書http://knockoutjs.com/documentation/if-binding.htmlに説明されていると信じています。差異は であり、表示されているマークアップは常にDOM内に残り、 は常にデータバインド属性が適用されています。可視バインディングは だけでコンテナ要素の表示を切り替えます。ただし、ifバインディングの は、DOM内に含まれているマークアップを物理的に追加または削除します。 となり、式がtrueの場合にのみ子孫にバインディングが適用されます。