使用KnockOut - 在添加到MVC .Net代码之前,我正在尝试构建主细节/项目应用程序的基础知识。
我想做的就是有一个简单的项目,价格,税收 - 以及一个计算列来显示每个项目的含税金额:
客户端KnockOut视图模型是:
var GiftModel = function(gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.formattedPrice = ko.computed(function() {
var pricet = self.gifts().price;
return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax : "None";
});
self.addGift = function() {
self.gifts.push({
name: "",
price: "",
tax:0
});
};
self.removeGift = function(gift) {
self.gifts.remove(gift);
};
self.save = function(form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
};
};
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95", tax:17.5},
{ name: "Long Cloak", price: "120.00", tax:20}
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
表格标记为:
<table data-bind='visible: gifts().length > 0'>
<thead>
<tr>
<th>Gift name</th>
<th>Price</th>
<th>Tax</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><input class='required' data-bind='value: name, uniqueName: true' /></td>
<td><input class='required number' data-bind='value: price, uniqueName: true' /></td>
<td><input class='required number' data-bind='value: tax, uniqueName: true' /></td>
<td data-bind='text: formattedPrice'></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addGift'>Add Gift</button>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
由于formattedPrice
功能似乎无法正常工作,因此停滞不前。
我在这里有一个jsfiddle:http://jsfiddle.net/marktait/TR6Sy/ - 有人能帮助我克服这个看似简单的障碍吗?
谢谢,
标记
答案 0 :(得分:4)
问题是你在循环礼物列表时调用了comouted函数。但是,计算出的方法不适用于给定的礼物,而是适用于所有礼物。你有两个选择:
要么你做这个,以便每个礼物对象都是这个计算方法的对象(就像用户Brandon建议的那样),或者你只是将它转换为一个正常的函数,作为参数作为礼物,如下所示:
self.getFormattedPrice = function(price, tax) {
var val = price ? "$" + parseFloat(price).toFixed(2) * (1 + tax) : "None";
return val;
};
然后,你这样称呼它:
<td data-bind='text: $parent.getFormattedPrice(price, tax)'></td>
我已更新您的fiddle。
答案 1 :(得分:2)
self.gifts()
是一个数组。但是在您的计算中,您尝试将其用作单个值。那是行不通的。您需要将它作为计算属性添加到数组中的每个项目:
var addFormattedPrice = function (gift) {
gift.formattedPrice = ko.computed(function () {
var pricet = gift.price;
return pricet ? "$" + pricet.toFixed(2) * (1 + gift.tax : "None";
});
};
ko.utils.arrayForEach(self.gifts(), addFormattedPrice);
self.addGift = function() {
var gift = {
name: "",
price: "",
tax:0
};
addFormattedPrice(gift);
self.gifts.push(gift);
};
答案 2 :(得分:0)
看起来你只是缺少一个右括号 -
return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax : "None";
应该是
return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax) : "None";