Question

我想我已经尝试了这一切，但我无法弄清楚这一点。我只是在用户增加数量时尝试更新表格中每行的总价格。到目前为止我已经尝试了

HTML中的数学：data-bind="text: parseFloat((total * quantity), 10)"
使用ko.computed（）（“工作”但每行的总数返回相同的值）
订阅活动
使用ko.utils.arrayForEach和jQuery $.each()
添加一个带有create()函数的ko.computed属性作为映射选项的一部分，但我真的不明白那个。

Here's a fiddle 即可。如果有人对如何完成这个看似简单的任务有任何建议我会很感激。

大多数失败的尝试都在关于那个小提琴的评论中。我最接近的是ko.computed，但我只能得到它返回一个值 - 表中最后一行的值。感谢

Answer 1

我已经实现了一个工作版本，我不太精通淘汰赛，所以我不确定它是否“正确”。

请参阅以下小提琴http://jsfiddle.net/YeSZ8/7/。

我为每一行ItemModel创建了一个模型。

它的定义如下

var ItemModel = function (arg) {
    var that = this;

    this.supplier     = arg.supplier;
    this.itemNumber   = arg.itemNumber;
    this.description  = arg.description;
    this.quantity     = ko.observable(parseInt(arg.quantity, 10));
    this.price        = arg.price;
    this.total        = ko.computed(function () {
        return that.price * that.quantity();
    });
};

它处理计算新的总价值。我没有使用可能更正确的mapping.fromJSON，而是手动加载了json并用几行填充了主视图模型。

编辑：我读了一些关于映射插件的内容，我得出的结论是它应该与create方法一起使用来启动ItemModel实例。

EDIT2：修复了已损坏的过滤，http://jsfiddle.net/YeSZ8/8/

Answer 2

这是使用映射插件的解决方案：

....
var mappingOptions = {
    'cartItemsList': {
        create: function (options) {
            var result = ko.mapping.fromJS(options.data, {});
            result.total = ko.computed(function () {
                return result.quantity() * parseFloat(result.price());
            });
            return result;
        }
    }
};

var model = {cartItemsList: JSON.parse(jsonData)};
var viewModel = ko.mapping.fromJS(model, mappingOptions);
viewModel.filter = ko.observable("");
...

改编的小提琴：http://jsfiddle.net/YeSZ8/10/

Answer 3

取决于你想要达到的目标。出于简单的显示目的，函数将执行：

viewModel.calcTotal = function ( row ) {
    return parseFloat(( row.total() * row.quantity() ), 10);
};

for循环$data中有一个特殊变量会传递您的行数据：

<td><span data-bind="text: $root.calcTotal($data)"></span></td>

此外，如果添加括号，您在HTML中使用数学的第一点将起作用。绑定observable的简单形式在表达式中不起作用。

data-bind="text: parseFloat(( total() * quantity() ), 10)"

敲除每行的总值

3 个答案: