ノックアウトobservableArray - 表示されていない項目が表示されない

Question

ノックアウトのobservableArrayに項目を追加しようとしています。アイテムがビューモデルに確実に追加されている間は、ビューに追加されていません。 ko.mapping.fromJSを使って何かするように見えます。

function ViewModel() { 
    var vm = { 
     props: ko.observableArray(["A", "B"]), 
     field: ko.observable(""), 
     val: "Some value" 
    }; 

    vm.field.subscribe(function() { 
     vm.props.push("C"); 
    }); 

    return vm; 
} 

var myVM = new ViewModel(); 
myVM = ko.mapping.fromJS(myVM); 
ko.applyBindings(myVM, document.getElementById("c")); 

HTML：：

<div id="c"> 
    <select data-bind="options: props"></select> 
    <input data-bind="value: field"> 
    <span data-bind="text: val"></span> 
</div> 

を使用すると、ドロップダウンリストが更新されないテキストボックスに何かを入力すると、私はここに直面していますこの問題を再作成。

フィドル：https://jsfiddle.net/GarryPas/3dmuLv92/3/

Answer 1

問題は、あなたの "myVarに= ko.mapping" 行です。ここでは、既存のViewModelにJSONをマッピングする適切な方法は次のとおりです。

これを知っ

ko.mapping.fromJS(jsonToBeMapped, observableToMapJsonInto); 

、以下のあなたの「myVarに= ko.mapping」の行を置き換える：

ko.mapping.fromJS(myVM, myVM); 

それが今のように動作しますビューモデル全体をそれ自体にマッピングする理由がないので面白そうに見えますが、期待しています。あなたはその行を完全に取り除いて、同じ結果を得ることができます。

ワーキングフィドルは：https://jsfiddle.net/dw1284/yf8mmk1u/

Answer 2

あなたはすでにあなたのモデルで観察可能な変数を定義しているので、ここでのマッピングを使用する必要はありません。 マッピングプラグインは、通常のJavaScriptオブジェクト（JSON構造）から観察可能なビューモデルへのマッピングを作成します。したがって、複雑なObjectを持つ場合は、すべてのデータに観測可能な変数を定義する必要はありません。マッピングプラグインがあなたのために仕事をします。しかし、ここではそれを使う必要はありません。

観測値を登録するたびに、更新値を取得するためにコールバック関数でパラメータ（newValue）を渡す必要があることを覚えておいてください。 https://jsfiddle.net/3dmuLv92/4/

function ViewModel() { 
    var vm = { 
    props : ko.observableArray(["A","B"]), 
    field: ko.observable(""), 
    val: "Some value" 
    }; 

    vm.field.subscribe(function(newValue) { 

    vm.props.push(newValue); 
    }); 

    return vm; 
} 

var myVM = new ViewModel(); 
ko.applyBindings(myVM, document.getElementById("c"));