2012-09-27 50 views
1

當我們第一次應用ViewModel時,一切正常,但如果我們在計算字段創建後重新應用映射,它們將被刪除。如果我們不改變的關鍵使用ko.mapping的敲除更新模型

http://jsbin.com/ojabaf/14/edit

var modelJs = {test:{ 
    list: [{name: 'a', val: 5, list: [ {name:'b', val: 11}, {name: 'c', val: 13} ]}]} 
}; 

var mapping = { 
    'list': { 
     key: function(data) { return ko.utils.unwrapObservable(data.name); } 
    }, 
    'name': { 
    key: function(data) { return ko.utils.unwrapObservable(data.name); } 
    } 
}; 

var model = ko.mapping.fromJS(modelJs, mapping); 

ko.utils.arrayForEach(model.test.list(), function(item) { 
    item.comp = ko.computed({read: function() { return this.val() * 2; } , owner: item }); 
    ko.utils.arrayForEach(item.list(), function(item2) { 
    item2.comp = ko.computed({read: function() { return this.val() * 3; } , owner: item2 }); 
    }); 
}); 

ko.applyBindings(model); 

$('button').click(function() { 
    var modelJs = {test: {val: 3, list: [{name: 'b', val: 7, list: [ {name:'s', val: 15}, {name: 'c', val: 17} , {name: 'd', val: 17}, {name: 'f', val: 17}]}]}}; 
    ko.mapping.fromJS(modelJs, model); 
}); 

有沒有辦法重新計算與ko.mapping的計算領域,而無需刷新頁面此代碼顯然作品?

我也tryed使用模板... http://jsbin.com/ojabaf/15/edit

回答

2

而不是循環您的陣列並添加comp計算觀測到每一個項目,建立你的映射,從而創建一個項目時,他們補充說。

var mapping = { 
    'list': { 
    key: function (data) { 
     return ko.utils.unwrapObservable(data.name); 
    }, 
    create: function (options) { 
     var mapped = ko.mapping.fromJS(options.data, { 
     'list': { 
      key: function (data) { 
      return ko.utils.unwrapObservable(data.name); 
      }, 
      create: function (options) { 
      var mapped = ko.mapping.fromJS(options.data); 
      return ko.utils.extend(mapped, { 
       comp: ko.computed(function() { 
       return this.val() * 3; 
       }, mapped) 
      }); 
      } 
     } 
     }); 
     return ko.utils.extend(mapped, { 
     comp: ko.computed(function() { 
      return this.val() * 2; 
     }, mapped) 
     }); 
    } 
    }, 
    'name': { 
    key: function (data) { 
     return ko.utils.unwrapObservable(data.name); 
    } 
    } 
}; 
var model = ko.mapping.fromJS(modelJs, mapping); 

http://jsbin.com/asomiq/1/edit