如何在Knockout.js中附加到映射的可觀察數組？

Question

如何在Knockout.js中的可編輯表中添加行？

var data = {
    "Lines": [
        {"Entries": [{"Hours": 5.5},{"Hours": 2.50},{"Hours": 3.75}]}, 
        {"Entries": [{"Hours": 5.1},{"Hours": 2.00},{"Hours": 4.75}]},
        {"Entries": [{"Hours": 1.2},{"Hours": 3.00},{"Hours": 2.12}]}
    ]
}
var data1 = {"Entries": [{"Hours": 0},{"Hours": 0},{"Hours": 0}],Total:0};

該表顯示self.List()是映射到data.Lines與self.List(ko.mapping.fromJS(data.Lines)())

[{"Entries":[{"Hours":"33.5"},{"Hours":2.5},{"Hours":3.75}],"Total":39.75},{"Entries":[{"Hours":5.1},{"Hours":2},{"Hours":4.75}],"Total":11.85},{"Entries":[{"Hours":1.2},{"Hours":3},{"Hours":2.12}],"Total":6.32}]

當我單擊addRow按鈕時，我想我需要重新計算self.List() 。 我已經嘗試了為什么不能將數據連接到可觀察到的陣列中

self.addRow =function(){
    self.List(self.List().concat(data1))
    self.applyTotals();
}

如果我不添加行， applyTotoals效果很好。

self.applyTotals = function(){
    ko.utils.arrayForEach(self.List(), function(vm){
        vm.Total = ko.computed(function(){
            var s = 0;
            ko.utils.arrayForEach(this.Entries(), function(entry){
                var p = parseFloat(entry.Hours(), 10);
                if (!isNaN(p)) {
                    s += p;
                }
            });
            return s;
        }, vm);
    });
}    

但是我沒有得到uncaught TypeError:this.Entries is not a function ，新行將不計算總數。 所以我嘗試了

self.addRow =function(){
    self.List = ko.computed(function(){
        var orig = self.List();
        var os= ko.toJS(orig);
        os.push(data1)
        console.log(JSON.stringify(os))
        var oa = ko.observableArray([]);
        return oa(ko.mapping.fromJS(os)());            
    })
}

如何修改映射的observableArrray？

這是小提琴： http://jsfiddle.net/mckennatim/jngesuf2/

Answer 1

@mcktimo好，您沒有有效地使用mapping插件。 您可以在fromJS函數中使用2nd paramter Mapper ，並有效地構建viewModel。

viewModel：

 function model(data) {
     var self = this;
     self.Entries = ko.observableArray();
     self.Total = ko.computed(function () {
         var sum = 0;
         ko.utils.arrayForEach(self.Entries(), function (entry) {
             var value = parseFloat(entry.Hours(), 10);
             if (!isNaN(value)) {
                 sum += value;
             }
         });
         return sum;
     });
     ko.mapping.fromJS(data, {}, self);
 }

 var mapping = { //everything goes through this point
     create: function (options) {
         return new model(options.data);
     }
 }

 function ViewModel() {
     var self = this
     self.List = ko.observableArray([])
     self.LoadData = function (data) {
         ko.mapping.fromJS(data.Lines, mapping, self.List)
     }
     self.LoadData(data);
     self.addRow = function () {
         self.List.push(ko.mapping.fromJS(data1, mapping));
     }
 }
 ko.applyBindings(new ViewModel(), document.getElementById('ko')) 

這里的工作樣本

我建議更深入地研究映射文檔