Question

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

但是，当使用可见绑定时，敲除似乎没有达到我预期的效果。当我检查一行时，文本框会正确显示，但是当我取消选中它时，文本框会一直显示。

我怀疑这与可观察的“被选中”被覆盖或类似的东西有关，但我被困在想法中。

这是一个显示问题的小提琴：http://jsfiddle.net/qccQs/2/

这是我在小提琴中使用的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>

这是我在小提琴中使用的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。

敲除双向绑定不能复选框

1 个答案: