Question

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

基本理念是：

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

然后我说“让我们学习淘汰赛并将整个应用程序移到该框架中” 所以当底部退出时。

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

我有一段时间搞清楚如何将输入值绑定到敲除数组中复选框的值。

Answer 1

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

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

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/

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

1 个答案: