使用knockout.js将两个值绑定到输入字段

时间:2013-03-22 18:10:36

标签: javascript data-binding knockout.js

描述
我有3个复选框和一个输入字段。当用户选中复选框时,值将显示在输入字段中。但是,当用户没有选中任何复选框时,我希望在输入字段中显示替代值。

到目前为止我有什么
   http://jsfiddle.net/uFQdq/8/

function ViewModel() {
    var self = this;  
    self.primaryClass = ko.observable("50"); 
    self.secondaryClass = ko.observable("40"); 
    self.otherClass = ko.observable("10"); 

    self.alternativeValue("200");     

    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());

问题
手头的问题是NOTHING正在输入字段中显示。我究竟做错了什么?

2 个答案:

答案 0 :(得分:1)

这是因为你没有使alternativeValue成为一个可观察的:

self.alternativeValue = ko.observable("200");

更新了fiddle

答案 1 :(得分:0)

我认为这就是你真正需要的:your fiddle, revision 10

<input data-bind="checked: selectedValues" type="checkbox" value="50">50</input>
<input data-bind="checked: selectedValues" type="checkbox" value="40">40</input>
<input data-bind="checked: selectedValues" type="checkbox" value="10">10</input>

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

/*You really don`t need an observables for values*/

var model = {
    selectedValues: ko.observableArray([])
}

model.sum = ko.computed(function () {
    var result = 0;

    model.selectedValues().forEach(function(value){
        result += parseInt(value, 10);
    });

    if (result === 0) {
        result = 200;
    }
    return result;
});

ko.applyBindings(model);