如何利用基因敲除映射插件添加新项(how to add new item using knockou

我尝试了淘汰赛映射样本，并认为我几乎没有。 我似乎没有能够在新富加入到viewModel.foos - 任何人都可以看到我在这里错过了吗？

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>

Answer 1:

您可以只需按下一个新的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" }));
};

Answer 2:

由于原来的海报将Foo类成员内观测也没有必要ko.mapping.fromJS适用于它。 但是我发现，当你有一个“原始”的JSON对象（无映射），您需要添加到可观察到的阵列（即您以前应用ko.mapping.fromJS（）），你的实际需要进行ko.mapping.fromJS如

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

否则，你的模板绑定（如果您有任何）会抱怨“类型错误xxxx是不是一个函数”。

文章来源: how to add new item using knockout mapping plugin