0

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

基本思想是：

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

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

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

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

4

1 回答 1

0

KO 中的绑定是双向的；如果您更新视图模型，UI 也会更新。如果您更新绑定的控件，则视图模型会更新。

您还可以创建计算属性，只要任何引用的 observables 更新，它就会更新。

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/

于 2012-12-11T07:39:51.583 回答