Jam*_*SOF 2 jquery ko.observablearray knockout-2.0 knockout.js computed-observable
我正在使用一个可观察的"部件"数组,其中包含一个可观察到的"Vol".我目前有每个部分的音量以及显示的总量.应用程序启动时,正确添加总金额.但是,当我更改零件的体积时,总量不会重新计算.
HTML:
<ul>
<li data-bind="foreach: Parts">
<input data-bind="value: Vol" />
<br/>
</li>
</ul>
<br/>
<br/>
<span data-bind="text: fullVol "></span>
Run Code Online (Sandbox Code Playgroud)
使用Javascript:
function Part (data) {
var self = this;
self.Vol= ko.observable(data.Vol);
}
function AppViewModel() {
var self = this;
self.Parts = ko.observableArray([new Part({"Vol": 1}), new Part({"Vol":2}), new Part({"Vol":3})]);
self.fullVol = ko.computed(function() {
var total = 0;
$.each(self.Parts(), function() { total += (this.Vol() ) })
return total;
});
}
ko.applyBindings(new AppViewModel());
Run Code Online (Sandbox Code Playgroud)
这是我的JsFiddle:http://jsfiddle.net/jwinstonaspen/Zmkew/6/
当你使用value: Vol绑定敲门时不会将输入转换为整数只是将用户输入的数据存储为字符串.
所以你需要在计算总数之前将其解析为整数:
$.each(self.Parts(), function() { total += (parseInt(this.Vol()) ) })
Run Code Online (Sandbox Code Playgroud)
一个固定的小提琴.
现在,因为您正在进行解析,所以当用户输入非数字输入时,您不应忘记处理.
但是,您可以轻松编写自定义绑定处理程序,从而抽象出解析.
或者你可以使用ko.extenders.该文档有一个例子,以及这里.