jquery和knockout，与数字框相关的复选框-Java 学习之路

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

基本思路是：

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

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

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

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

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>
    

</div>

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

回复于 2024-05-07T17:42:20+08:00

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

1 回答

相关问题