有效处理淘汰无线电查找

时间:2013-07-18 16:02:13

标签: knockout.js

我的视图我在视图模型上绑定了一个ID(在我的情况下是一个SKU),我有一个计算值,它执行如下的查找( fiddle link here ):

查看

<div data-bind="foreach: server">
    <div>
        <input type="radio" name="server" data-bind="attr: {value: sku}, checked: $root.selectedServer" />
        <span data-bind="text: name"></span>
    </div>
</div>
<p data-bind="text: selectedServer"></p>
<p data-bind="text: description"></p>

查看-模型

var serverOptions = [{
    name: "One",
    sku: 1000,
    specification: "yes",
    price: 100
}, {
    name: "Two",
    sku: 1001,
    specification: "hello",
    price: 200
}, {
    name: "Three",
    sku: 1002,
    specification: "wow",
    price: 300
}];

viewModel = function() {
    var self = this;
    self.server = serverOptions;
    self.selectedServer = ko.observable();

    self.description = ko.computed(function () {
        var selectedSku = this.selectedServer();

        // needs to be checked as on viewmodel creation the computed function will be called
        // and selectedServer will not be selected
        if(typeof selectedSku == "undefined")
            return;

        var found = ko.utils.arrayFirst(serverOptions, function (item) {
            return item.sku == selectedSku;
        }, this);

        var textDescription = found.name + " - " + found.specification + " (" + found.price + ")";

        return textDescription;
    }, this);

    return self;
};

ko.applyBindings(new viewModel());

我将从单选按钮选择中进行相当多的这些查找,并且可以看出,据我所知,需要对每个进行错误检查,因为最初计算值所依赖的单选按钮将是未定义的。视图模型创建 - 这使得视图模型代码非常“笨重”。

上面的代码是最有效的方法,可以推迟计算绑定触发器直到构建viewmodel,还是有任何其他可以使视图模型更清晰的挖空效用函数(或重新分解)?

我的javascript技能仍然慢慢融合在一起作为C#多年的速成课程,所以非常感谢。

1 个答案:

答案 0 :(得分:1)

要延迟计算的评估,请添加deferEvaluation选项。

self.description = ko.computed({
        read : function () {
        var selectedSku = this.selectedServer();

        [...]

        return textDescription;

      },
      deferEvaluation : true,

}, this);

请参阅compted documentation关于deferEvaluation。