2013-03-22 60 views
0

说明
我有3个复选框和一个输入字段。当用户选择复选框时,值将出现在输入字段中。但是,当用户没有选择任何复选框时,我想要在输入字段中显示替代值。使用knockout.js将两个值绑定到输入字段

我有什么到目前为止
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()); 

问题
问题在手,没有什么是被显示在输入字段。我究竟做错了什么?

回答

1

那是因为你还没有alternativeValue可观察到的制作:

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

更新fiddle

+0

党!那是一个愚蠢的错误。谢谢保罗 – Stranger 2013-03-22 18:36:15

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); 
相关问题