Question

我似乎没有这个工作的计算值。任何意见都将不胜感激。

我从服务器获取价格。

 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>

Answer 1

您混淆了一点：如果更改了视图模型的其他部分应该能够做出反应的每个值都必须是可观察的。在您的情况下，您有一个对象“价格”，这是一个可观察的对象，但该对象的属性（如“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/

Answer 2

您的prices变量是可观察的，但其成员却不是。像这样重新定义：

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

现在，这个几乎有效，但如果您更改了值，它会将它们转换为字符串，因此18和12的总和将为{{ 1}}！我们需要将这些字符串转换为数字。

你应该全力以赴！

为什么我的knockoutjs计算可观察不起作用？

2 个答案: