jquery和knockout,复选框与一个数字框相关



我有一个复选框列表,单击时会隐藏和显示一个数字框。以下是该工作的JSfiddle:http://jsfiddle.net/bjornmann/yXUqf/3/

其基本思想是:

$('.numberthing').each(function(){push the data to an array here.})

然后我说"让我们学习淘汰赛,并将整个应用程序转移到那个框架中"就在那时,底部掉了下来。

我有一个项目列表(复选框)推送到一个数组,然后在视图中有一个ko foreach,但我不知道如何把数字框中的数据加进去。

我花了很多时间来弄清楚如何在淘汰中将输入的值绑定到数组中复选框的值。

KO中的绑定是双向的;如果更新视图模型,则会更新UI。如果更新绑定控件,则视图模型将更新。

您还可以创建计算属性,每当任何引用的可观察性更新时,这些属性都会更新。

function ViewModel(data) {
data = data || {};
this.checkboxes = ko.observableArray(
ko.utils.arrayMap(data.checkboxes, function (title) {
return new CheckboxModel(title);
})
);
this.checkedCheckboxes = ko.computed(function () {
return ko.utils.arrayFilter(this.checkboxes(), function (cb) {
return cb.checked();
});
}, this);
}
function CheckboxModel(title) {
this.title = ko.observable(title);
this.checked = ko.observable(false);
this.number = ko.observable(1);
}
$(function() {
ko.applyBindings(new ViewModel({
checkboxes: [ 'Champion', 'Reserve champion',
'1st', '2nd', '3rd', '4th', '5th', '6th',
'7th', '8th', '9th', '10th', 'Other']
}));
});
​    ​
<div data-bind="foreach: checkboxes" id="cblist">
<label data-bind="visible: checked">
<input type="number" data-bind="value: number"/>
<span data-bind="text: title"></span>
</label>
<label data-bind="visible: !checked()">
<input type="checkbox" data-bind="checked: checked"/>
<span data-bind="text: title"></span>
</label>
<br/>
</div>

http://jsfiddle.net/MizardX/zHTRP/

最新更新