我的视图我在视图模型上绑定了一个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#多年的速成课程,所以非常感谢。
答案 0 :(得分:1)
要延迟计算的评估,请添加deferEvaluation选项。
self.description = ko.computed({
read : function () {
var selectedSku = this.selectedServer();
[...]
return textDescription;
},
deferEvaluation : true,
}, this);
请参阅compted documentation关于deferEvaluation。