1

我正在使用 knockout.js。

这是我的场景：

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

我对这个问题的看法

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

在我的视图模型中，我有这个计算函数：

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"/>

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

“无法解析绑定。↵消息：ReferenceError：未定义类；↵绑定值：值：类”

我会很感激你的帮助。

4

2 回答 2

2

如果不查看所有代码，很难说出哪里出了问题，但在我看来，您没有添加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/

于 2013-03-22T12:54:26.670 回答
2

您需要将classes功能分配给 ViewModel：

function ViewModel() {
    var self = this;

    self.classes = ko.computed(function () {
        // your function
    });
}
于 2013-03-22T12:57:24.820 回答