javascript - knockout 双向绑定(bind)不适用于复选框

Question

我有一个表单，可以为用户生成一个列表选项，每个选项都有一个复选框、一个标签和一个输入字段。仅当勾选复选框时才应显示输入字段。这些选项是通过 JSON 调用生成的。

但是，在使用可见绑定(bind)时， knockout 似乎并没有达到我的预期。当我选中一行时，文本框正确显示，但当我取消选中它时，文本框保持显示。

我怀疑这与可观察的“选定”被覆盖或类似的事情有关，但我一直在寻找想法。

这是一个显示问题的 fiddle :http://jsfiddle.net/qccQs/2/

这是我在 fiddle 中使用的 HTML:

<div data-bind="template: { name: 'reason-template', foreach: reasonList }"></div>

<script type="text/html" id="reason-template">
    <div>
        <input type="checkbox" data-bind="value: selected" />
        <span data-bind="text: name"></span>
        <input type="text" class="datepicker" data-bind="value: date, visible: selected" />
    </div>
</script>

这是我在 fiddle 中使用的 JavaScript:

function ReasonItem(name) {
    this.name = ko.observable(name);
    this.date = ko.observable(null);
    this.selected = ko.observable(false);
};

function MyViewModel() {
    var self = this;
    self.reasonList = ko.observableArray([  ])
};

var vm = new MyViewModel();

new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({
            data: [
                { name: "Reason 1", selected: false, date: null },
                { name: "Reason 2", selected: false, date: null },
                { name: "Reason 3", selected: false, date: null }
            ]
        }),
        delay: 0
    },
    onSuccess: function(response) {
        $.each(response.data, function(index, reason) {
            vm.reasonList.push(new ReasonItem(reason.name));
        });
    }
}).send();

ko.applyBindings(vm);

关于如何让它像我预期的那样运行有什么想法吗？

Answer 1

对于 checkbox 类型的输入，您需要使用 checked 而不是 value:

<input type="checkbox" data-bind="checked: selected" />

参见Knockout Documentation .