[英]How do I append to a mapped observable array in Knockout.js?
How do you add a row to an editable table in Knockout.js? 如何在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};
The table displays self.List()
which is an observableArray mapped to data.Lines
with self.List(ko.mapping.fromJS(data.Lines)())
该表显示
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}]
When I click the addRow button I am thinking I need to recompute self.List()
. 当我单击addRow按钮时,我想我需要重新计算
self.List()
。 I have tried from why-can-not-i-concat-data-to-observable-array-in-knockout 我已经尝试了为什么不能将数据连接到可观察到的阵列中
self.addRow =function(){
self.List(self.List().concat(data1))
self.applyTotals();
}
applyTotoals
works fine if I don't add a row. 如果我不添加行,
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);
});
}
but I get uncaught TypeError:this.Entries is not a function
and the new row won't compute totals. 但是我没有得到
uncaught TypeError:this.Entries is not a function
,新行将不计算总数。 So I have tried 所以我尝试了
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)());
})
}
How do I modify a mapped observableArrray? 如何修改映射的observableArrray?
Here is the fiddle: 这是小提琴: http://jsfiddle.net/mckennatim/jngesuf2/
http://jsfiddle.net/mckennatim/jngesuf2/
well @mcktimo you are not effectively using mapping
plugin . @mcktimo好,您没有有效地使用
mapping
插件。 you can make use of 2nd paramter Mapper
in fromJS function and build you viewModel effectively . 您可以在fromJS函数中使用
2nd paramter Mapper
,并有效地构建viewModel。
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'))
I suggest to take a deeper dive into the mapping documentation 我建议更深入地研究映射文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.