私は、概念の証明としてKnockout.jsを使って簡単なアプリケーションを構築しています。私はKnockoutをとても慣れていないので、この質問のコードは完璧ではないかもしれないし、悪い習慣を示すかもしれないので、もしそうなら、私に知らせてください！
私は options バインディングを使用して select 要素：
ビューモデルは次のようになります。
var ViewModel = function() {
this.titles = ko.observableArray([]);
};
DOM準備ができたら、私はその観測可能な配列にいくつかの値をプッシュします（各値は "Mr"、 "Mrs"などの "タイトル"を表すオブジェクトリテラルです）。
var data = [
{ value: "Mr", display: "Default Value" },
{ value: "Miss", display: "Miss" },
{ value: "Mr", display: "Mr" },
{ value: "Ms", display: "Ms" }
];
ko.applyBindings(view);
for(var i = 0; i < data.length; i++) {
view.titles.push(data[i]); //Push titles into observable array
}
なぜ "Mr"という値を持つ2つのオブジェクトがあるのか尋ねないでください。これは、対処しなければならないデータのやり方です。私はそれを変更することはできません。しかし、これが問題の原因です。私は最初のオブジェクトが選択されたオプションを表すと期待しますが、そうではありません。 3番目のオブジェクトは、実際にデフォルト選択として終わる option 要素を表します。
これは、観測可能な配列によって、ループが反復するときに option 要素が1つずつDOMに追加されるためです。ノックアウトは、選択したオプションをその値をチェックして保持しようとします。最初の反復の後、選択された option の値は "Mr"です。 3回目の繰り返しの後にKnockoutはそれが以前に選択されたオプションだと思って選択するように "Mr"という値を持つ別の option があります。
この問題を示すフィドルへのリンクがあります。 「デフォルト値」オプションは選択する必要がありますが、選択する必要はありません。ボタンをクリックして同じ値を持つ別のオプションを再度追加すると、そのオプションが選択されますが、ドキュメントによれば、そのオプションは選択されてはなりません。
私の質問は、どのようにこの行動を防ぐことができますですか？