为啥我的 knockoutjs 计算 observable 不起作用?

Posted

技术标签:

【中文标题】为啥我的 knockoutjs 计算 observable 不起作用?【英文标题】:Why is my knockoutjs computed observable not working?为什么我的 knockoutjs 计算 observable 不起作用? 【发布时间】:2013-03-07 04:04:09 【问题描述】:

我似乎无法计算出这项工作的价值。任何意见将不胜感激。

我从服务器获取我的价格值。

 var pModel = function () 
     var self = this;
     self.prices = ko.observable( "ID": 1,"Price1": 12,"Price2": 12);

     self.Total = ko.computed(function () 
         var total = 0;
         total = self.prices().Price1 + self.prices().Price2;
         return total;
     );
 ;
 var VModel = new pModel();
 ko.applyBindings(VModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<form action='/someServerSideHandler'>
    <table>
        <thead>
            <tr>Prices</tr>
        </thead>
        <tbody id="calc">
            <tr>
                <td>Price 1</td>
                <td>
                    <input data-bind='value: prices().Price1' />
                </td>
            </tr>
            <tr>
                <td>price 2</td>
                <td>
                    <input data-bind='value: prices().Price2' />
                </td>
            </tr>
            <td>TOTAL</td>
            <td> <span data-bind="text: $root.Total"></span>
            </td>
        </tbody>
    </table>
</form>

【问题讨论】:

【参考方案1】:

您的 prices 变量是可观察的,但它的成员不是。像这样重新定义它:

 self.prices = ko.observable(
     ID: ko.observable(1),
     Price1: ko.observable(12),
     Price2: ko.observable(12)
 );

现在,这几乎可以工作了,但是如果您更改值,它会将它们转换为字符串,因此1812 的总和将是1812!我们需要将这些字符串转换为数字。

 self.Total = ko.computed(function () 
     var price1 = parseFloat(self.prices().Price1());
     var price2 = parseFloat(self.prices().Price2());
     return price1 + price2;
 );

你应该准备好了!

【讨论】:

我得到这个:self.prices = ko.observable( "ID": 1,"Price1": 12,"Price2": 12);从服务器..如果是这样,我怎样才能让它们可观察? Knockout mapping plugin 听起来像你想要的。【参考方案2】:

你有点搞混了:你的视图模型的其他部分应该能够在改变时做出反应的每个值都必须是可观察的。在您的情况下,您有一个可观察的对象“价格”,但该对象的属性(例如“Price1”和“Price2”)不是可观察的。这意味着,只有当放置在“价格”中的整个对象被新值替换时,您计算的 observable 才会更新。

所以只要让这些值是可观察的:

var pModel = function () 
    var self = this;

    self.prices = 
        "ID": 1, // IDs normally do not change so no observable required here
        "Price1": ko.observable(12),
        "Price2": ko.observable(12)
    ;

    self.Total = ko.computed(function () 
        return +self.prices.Price1() + +self.prices.Price2();
    );
;

演示:http://jsfiddle.net/Jjgvx/3/

【讨论】:

在计算总数之前,您需要在价格上parseFloat,否则它们会组合字符串。 @EvanHahn 谢谢,已解决。 我得到这个:self.prices = ko.observable( "ID": 1,"Price1": 12,"Price2": 12);从服务器..如果是这样,我怎样才能让它们可观察? @NoviceDeveloper 查看映射插件:knockoutjs.com/documentation/plugins-mapping.html 将对此进行调查。您的回复实际上是附加总数而不是实际添加。

以上是关于为啥我的 knockoutjs 计算 observable 不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

KnockoutJs observable array 通过计算 observable 和节流

KnockoutJS 3.X API 第三章 计算监控属性Pure computed observables

KnockoutJs - 计算数据库评级

Knockoutjs官网翻译系列 使用Computed Observables

如何在 KnockoutJS 中访问 ViewModel 之外的 observable?

Knockoutjs之observable和applyBindings的使用