Question

我正在使用knockout.js。

这是我的方案：

我有一个输入字段和三个复选框。每个复选框都有一个关联的值。例如，checkbox1（500），checkbox2（200），checkbox3（100）。当用户单击该复选框时，我希望该复选框的输出显示在输入字段中。如果用户单击两个复选框，我希望两个复选框的值的总和出现在输入字段中。选中所有三个复选框时同样适用。

我对问题的看法

我认为我需要一个计算函数，它将根据检查的复选框计算值。然后，我可以将计算的函数绑定到我的输入字段。

在我的viewmodel中，我有这个计算函数：

var classes = ko.computed(function() { 
    var total = 0; 
    if(primaryClass.checked)
    total+= parseInt(primSalary()); 

    if(secondaryClass.checked)
    total+= parseInt(secSalary());    

    if(otherClass.checked)    
    total+= parseInt(otherSalary());

    return total;    
 });

在我看来，我像这样绑定我的值：

<input type="text" class="input-medium" placeholder="0" data-bind="text: classes"/>

但是，当我这样做时，控制台会抛出以下消息：

“无法解析bindings.↵Message：ReferenceError：未定义类;↵Bindings值：value：classes”

我很感激你们的帮助。

Answer 1

如果没有看到所有代码，很难说出现了什么问题，但在我看来，您不会将classes computed添加到视图模型或不调用applyBindings。另外，以另一种方式实现这种行为也更好。您可以将已检查的绑定绑定到observableArray，在这种情况下，您的计算结果将更好看：

<input data-bind="checked: selectedValues" type="checkbox" value="500">500</input>
<input data-bind="checked: selectedValues" type="checkbox" value="200">200</input>
<input data-bind="checked: selectedValues" type="checkbox" value="100">100</input>

<br/>
Result:
<input data-bind="value: sum" type="text"></input>

function ViewModel() {
    var self = this;

    self.selectedValues = ko.observableArray([]);

    self.sum = ko.computed(function () {
            var total = 0;
            ko.utils.arrayForEach(self.selectedValues(), function (item) {
                total += parseInt(item);
            });
            return total;
        });

    }

ko.applyBindings(new ViewModel());

这是工作小提琴： http://jsfiddle.net/uFQdq/

Answer 2

您需要将classes函数分配给ViewModel：

function ViewModel() {
    var self = this;

    self.classes = ko.computed(function () {
        // your function
    });
}

淘汰计算功能

2 个答案: