jquery和敲除，与数字框相关的复选框

Question

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

基本思路是：

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

然后我说“让我们学习淘汰赛并将整个应用程序移动到该框架中” 所以这就是底部下降的时候。

我有一个项目列表（复选框）推送到一个数组，然后在视图中有一个 ko foreach， 但我不知道如何从数字框中添加数据。

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

Answer 1

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/