【问题标题】:Knockout computed of observables in observableArray对 observableArray 中的 observable 计算淘汰赛
【发布时间】:2014-05-02 23:24:42
【问题描述】:

是否可以在 observableArray 中有一个对象,该对象是同一对象中其他 observables 的计算值?我有以下数组:

self.drug_costs_table = ko.observableArray([
        {
            label: ko.observable('salad'),
            cost_per_dose: ko.observable('123'),
            administrations: ko.observable('9'),
            discount: ko.observable('10'),
            cost_per_year: ko.computed(function () {
                // administrations * cost per dose
            })
        }
]);

observableArray 将在 HTML 中动态构建,最后一列是药物成本 x 管理。是否有可能在数组中有这个值,或者必须在数组之外做一些事情来计算 cost_per_year?

这是我的 HTML:

<!-- ko foreach: drug_costs_table -->
    <div class="row">
        <div class="grid_4"><label data-bind="text: label"></label></div>
        <div class="grid_2"><input class="total-val" data-bind="decimal: cost_per_dose"></div>
        <div class="grid_2"><input data-bind="number: administrations"></div>
        <div class="grid_2"><input data-bind="percentage: discount"></div>
        <div class="grid_2"><input class="total-val" data-bind="decimal: cost_per_year"></div>
    </div>
<!-- /ko -->

对此的任何帮助/建议将不胜感激;我对淘汰赛还是有点新手!

小提琴:http://jsfiddle.net/VWc8e/

【问题讨论】:

    标签: javascript jquery knockout.js knockout-2.0


    【解决方案1】:

    这是可能的。但我认为您最好为药物成本实体定义视图模型。

    function drugCot(label, cost_per_does, administrations, discount) {
       var self = this;
        self.label = ko.observable(label),
        self.cost_per_dose = ko.observable(cost_per_does),
        self.administrations = ko.observable(administrations),
        self.discount = ko.observable(discount),
        self.cost_per_year = ko.computed(function () {
             return  self.administrations() *  self.cost_per_year();
        })
    }
    

    然后您可以在包含 self.drug_costs_table 的视图模型中使用它来添加新成本。

    self.durg_costs_table.push(new drugCost('salad', 123, 9, 10));
    

    编辑

    每当您现在更新 self.administrations 或 self.cost_per_year observables 时,您计算的 cost_per_year 都会更新。

    var drugCost1 = new drugCost('salad', 123, 9, 10);
    self.durg_costs_table.push(drugCost1);
    drugCost1.administrations(15);
    // after this line of code cost_per_year will contian new value and will notify all the subscribers and rerender bound html elements
    

    【讨论】:

    • 我已经完成了这项工作,但是现在我的 cost_per_year 总计不会在视图中的管理值或 cost_per_dose 值发生变化时更新? @rwisch45 小提琴:jsfiddle.net/VWc8e/2
    【解决方案2】:

    是的,在一个 KO 可观察数组中可以有 KO 计算的可观察对象。如果计算只使用数组中同一对象的其他变量,则无需在数组之外执行任何操作。

    self.drug_costs_table = ko.observableArray([
            {
                label: ko.observable('salad'),
                cost_per_dose: ko.observable('123'),
                administrations: ko.observable('9'),
                discount: ko.observable('10'),
                cost_per_year: ko.computed(function () {
                    return parseInt(this.administrations(),10) * parseInt(this.cost_per_dose(),10);
                }, this)
            }
    ]);
    

    编辑

    @MyP3uK 的答案应该是您首选的方式

    【讨论】:

    • 您缺少括号 + 您需要输入 self 而不是 this
    • 这不起作用?出于某种原因,我收到上述的 NaN 错误。 (即使使用 self + () )@GôTô
    • @leaksterrr 那是因为 Administrations 和 cost_per_dose 是字符串,你需要先转换它
    • @GôTô 在这种情况下,您不需要self - 查看标题为管理此 的计算可观察的section in the KO docs。在这种情况下,this 指的是父对象,它是他的 observableArray 中的第一个对象(随后是数组中的每个其他对象)
    • @leaksterrr 这些变量是字符串。尝试先将它们转换为整数,即parseInt(this.administrations,10)
    猜你喜欢
    • 2019-06-02
    • 2016-07-21
    • 1970-01-01
    • 2020-05-30
    • 2013-03-22
    • 1970-01-01
    • 2013-04-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多