5

ノックアウトマッピングのサンプルを試していますが、もうすぐそこにいると思います。viewModel.foosに新しいFooを追加できないようです-ここで見逃したものを誰かが見ることができますか？

var Foo = function (data) {

    var self = this;
    self.id = data.id;
    self.Name = ko.observable(data.Name);

}

var dataMappingOptions = {
    key: function(data) {
        return data.id;        
    },
    create: function (options) {

        return new Foo(options.data);
    }
};


var viewModel = {

    foos: ko.mapping.fromJS([]),
    loadInitialData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    }
};

viewModel.addFoo = function () {
    viewModel.foos.push(ko.mapping.fromJS(new Foo()));
    viewModel.loadUpdatedData();
}


    <ul data-bind="template: {name: 'TopTemplate'}"></ul>
<script type="text/html" id="TopTemplate">
    <li><span>Result</span>
        <ul data-bind=" template: {name:  'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li>
    <button data-bind='click: addFoo'>Add Foo</button>
</script>       
<script type="text/html" id="FooTemplate">     
    <li><span data-bind='text: Name'></span>

    </li>

</script>
4

2 に答える 2

11

元のポスターはFooクラスのメンバー内でオブザーバブルを適用しているため、ko.mapping.fromJSを適用する必要はありません。ただし、監視可能な配列に追加する必要がある「生の」jsonオブジェクト（マッピングなし）がある場合（つまり、以前にko.mapping.fromJS（）を適用した場合）、実際に実行する必要があることがわかりました。 ko.mapping.fromJS例：

myArray.push(ko.mapping.fromJS(myNewRawJsonItem));

そうしないと、テンプレートバインディング（存在する場合）は「TypeErrorxxxxは関数ではありません」と文句を言います。

于 2012-12-13T05:05:01.370 に答える
4

新しいFooをobservableArrayに直接プッシュするだけです。

これは、いくつかの初期データをロードしてから、クライアント側で新しいアイテムを追加するためのボタンとともにいくつかの更新されたデータをロードするサンプルです。 http://jsfiddle.net/rniemeyer/wRwc4/

var viewModel = {
    foos: ko.mapping.fromJS([]),
    loadInitialData: function() {
        ko.mapping.fromJS(initialData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function() {
        ko.mapping.fromJS(updatedData, viewModel.foos);
    }
};

viewModel.addFoo = function() {
    viewModel.foos.push(new Foo({ id: 0, Name: "New" }));
};
于 2012-08-03T02:34:39.653 に答える