如何使用挖空映射插件添加新項目

我正在嘗試一個淘汰賽映射樣本，並認爲我幾乎在那裏。我似乎無法添加新的Foo到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>

來源

2012-08-03 MikeW

您可以直接將新的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-03 02:34:39

非常感謝您的幫助（對於其他問題:)） – MikeW 2012-08-03 05:13:26

謝謝，以及如何通過索引刪除元素？ – Andrew 2017-03-09 16:36:53

由於原來的海報將Foo類成員內觀測也沒有必要ko.mapping.fromJS適用於它。然而我發現當你有一個'raw'json對象（沒有映射）時，你需要添加到一個可觀察數組中（例如，你之前已經應用ko.mapping.fromJS（）），你確實需要執行ko.mapping.fromJS例如

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

否則您的模板綁定（如果有的話）會抱怨「TypeError xxxx不是函數」。

來源

2012-12-13 05:05:01

你是一個拯救生命的人。我想知道爲什麼它會拋出這個錯誤。非常感謝。 – shriek 2014-03-04 05:01:53

如何使用挖空映射插件添加新項目

回答

相關問題