作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使用 Knockout 的映射插件时遇到了一个奇怪的问题。
如果我通过映射填充一个 observable 数组,我将无法迭代该数组或获取其长度,即使 UI 已正确更新,该数组似乎也是空的。
你可以在这里找到一个有效的 jsFiddle:http://jsfiddle.net/VsbsC/
这是 HTML 标记:
<p><input data-bind="click: load" type="button" value="Load" /></p>
<p><input data-bind="click: check" type="button" value="Check" /></p>
<table>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: value"></td>
</tr>
</tbody>
</table>
<p data-bind="text: total"></p>
var ViewModel = function () {
var self = this;
self.items = ko.observableArray();
self.load = function () {
self.items([
{ "name": "joey", "value": 1 },
{ "name": "anne", "value": 2 },
{ "name": "paul", "value": 3 },
{ "name": "mike", "value": 4 }
]);
};
self.check = function () {
alert(self.items().length);
};
self.total = ko.computed(function () {
var total = 0;
for (var i = 0; i < self.items().length; i++) {
total += self.items()[i].value;
}
return total;
});
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
self.items([
{ "name": "joey", "value": 1 },
{ "name": "anne", "value": 2 },
{ "name": "paul", "value": 3 },
{ "name": "mike", "value": 4 }
]);
self.items(ko.mapping.fromJS([
{ "name": "joey", "value": 1 },
{ "name": "anne", "value": 2 },
{ "name": "paul", "value": 3 },
{ "name": "mike", "value": 4 }
]));
console.info
-ing
self.items
会产生一个空数组。
最佳答案
您看到的问题是基于这样一个事实:如果给定数组,映射插件将创建一个 observableArray。因此,您将 self.items
observableArray 的值设置为等于 observableArray(而不仅仅是数组)。所以,它被包裹了额外的时间。
这是一种方法:
var ViewModel = function () {
var self = this;
self.items = ko.mapping.fromJS([]);
self.load = function () {
ko.mapping.fromJS([
{ "name": "joey", "value": 1 },
{ "name": "anne", "value": 2 },
{ "name": "paul", "value": 3 },
{ "name": "mike", "value": 4 }
], self.items);
};
self.check = function () {
alert(self.items().length);
};
self.total = ko.computed(function () {
var total = 0, items = self.items();
for (var i = 0; i < items.length; i++) {
total += items[i].value();
}
return total;
});
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
ko.mapping.fromJS
。
value()
,因为它是映射插件中的 observable。
关于knockout.js - Knockout 的映射破坏了可观察的数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9035673/
我是一名优秀的程序员,十分优秀!