为计算的 Observable Knockout.js 设置默认值答案

【问题标题】：Setting default values for computed Observable Knockout.js为计算的 Observable Knockout.js 设置默认值
【发布时间】：2013-03-14 23:29:12
【问题描述】：

我是 Knockout.js 的新手我在 UI 中有 3 个字段。产品价值。数量总计

计算的 observable 一切正常，可以保存数据。出于某些业务原因，总数将在后端更改。

在取回数据时，我需要将数据库中的总数显示为初始值，但是当用户更改产品和值时，应该使用原始计算函数。

我尝试了 bindingHandlers 但不能正确..

帮助将不胜感激。

var TsFoundationDeviceModel = function(product,qty,total) {
    var self = this;
    self.product = ko.observable(product);
    self.quantity= ko.observable(qty);
    self.computedExample = ko.computed(function() {
        return self.product() * self.quantity() ;
    });
}

<input name="product" data-bind="value:product">
<input name="value" data-bind="value:value">
<input name="total" data-bind="value:computedExample"/>

【问题讨论】：

请发布您的代码或您尝试过的内容。
所以问题是当您从数据库中取回数据或用户更新输入值时？？
问题是我如何设置从服务器获得的数据（即总计）以及产品价值和数量，但 Knockout 最初不应该进行计算，因为总计是一个计算字段。它应该只显示我从服务器获得的总值，当用户更改 ProductValue 和数量中的某些内容时，值应该更改。
为了解决问题，如何设置页面加载时计算域的默认值，但是随着可靠值即产品价值和数量的变化，应该触发计算函数。跨度>

标签： knockout.js

【解决方案1】：

您可以做到这一点的唯一方法是跟踪初始化程序。因此，第一次调用视图模型时，将初始化设置为 true 并检查总数是否未定义。如果是，则返回总计，重置初始化。从那里开始，它将始终根据其他两个字段更新计算值。

这是相同的小提琴（顺便说一句，您的绑定中有一个错误，没有名为“值”的属性，我认为它是数量

http://jsfiddle.net/sujesharukil/YTDZ9/

var TsFoundationDeviceModel = function(product,qty,total) {
    var 
    self = this;
    self.initialize = ko.observable(true);
    self.product = ko.observable(product);
    self.quantity= ko.observable(qty);
    self.computedExample = ko.computed(function() {
        var value = self.product() * self.quantity();
        if(self.initialize())
        {
            self.initialize(false);
            if(total != undefined && total != null)
                return total;
        }
        return value ;
    });
}


ko.applyBindings(new TsFoundationDeviceModel(1, 1, 3));

本质上，您将只返回一次总计，这是您第一次创建视图模型的实例。

希望这会有所帮助！

-苏杰

【讨论】：

【解决方案2】：

据我所知，您存储了 3 个输入，您可以从数据库中获取它的值。

当用户点击某个保存按钮时，数据应该被发送到服务器以更新或插入数据库，当表单被加载时，输入应该填充来自数据库的用户数据。

所以你应该为此目的使用KnockoutJS mapping plugins。

使用该插件，您只需对服务器进行 ajax 调用以获取数据并将其转换为 ViewModel，然后在您的 html 上使用该 ViewModel。

通过使用相同的插件，您可以将 ViewModel 转换为 JSON 格式并将其发送回您的服务器以将其保存在数据库中。

【讨论】：

谢谢 Ebram。我这样做没有问题，但在我的例子中，当我得到总值时，如何将该值分配给总值。现在它将根据产品和价值计算，根据我的要求，在加载页面或用户更改产品或价值之前不应发生这种情况。
来自 Knockoutjs 文档“计算的 observables 是依赖于一个或多个其他 observables 的函数，并且在任何这些依赖关系发生变化时都会自动更新。”
我正在努力将服务器的默认值设置为总输入。除此之外，一切都很好。有人可以帮忙吗？
确定如何将来自服务器的数据应用到 html 中？
对于 Product 和 value ，我只是像这样调用 TsFoundationDeviceModel(10,20) ，总的来说我可以传递另一个参数，但需要破解一种将它传递给计算函数的方法。

【解决方案3】：

如果我正确理解您想要什么，您可以让 Computed 本身返回初始值，除非 observables 发生变化。

self.product = ko.observable(product);
self.quantity= ko.observable(qty);
self.orig_product = ko.observable(product);
self.orig_quantity= ko.observable(qty);

self.computedExample = ko.computed(function() {
    if (self.product() !== self.orig_product
        || self.quantity() !== self.orig_quantity()) {
        return self.product() * self.quantity() ;
    } else {
        // return the initial value
    }
});

【讨论】：