Question

给定一个复选框列表，其值等于一个人的名字，我试图将它们添加到一个淘汰赛observableArray中。当有人点击复选框时，如何将人员添加到observableArray？

对于HTML，我有以下内容：

<ul>
    <li>
        <div>
            <input type="checkbox" value="John" data-bind="clicked: addPerson"><span >John</span>

            <input type="checkbox" value="Allen" data-bind="clicked: addPerson"><span>Allen</span>

        </div>
    </li>
</ul>
<hr/>
<div data-bind="text: ko.toJSON(selectedPeople)"></div>

然后淘汰赛的javascript如下：

var viewModel= function () {
    var self = this;
    self.people = ko.observableArray();
    self.selectedPeople = ko.observableArray();
    self.addPerson = function(value){
        self.selectedPeople.push(value);
        return true;
    };
};

ko.applyBindings(viewModel);

我原本以为我点击它们就会打印出这些名字。我究竟做错了什么？

http://jsfiddle.net/justinnafe/WHG9x/

Answer 1

分叉并更新Fiddle。您可以使用computed来解决问题。此外，您在绑定应用和复选框绑定时犯了错误（您应该使用checked绑定，在这种情况下没有理由创建其他函数。）

HTML：

<ul>
    <li>
        <div>
            <input type="checkbox" value="John" data-bind="checked: selectedPeople"/>
            <span>John</span>
            <input type="checkbox" value="Allen" data-bind="checked: selectedPeople"/>
            <span>Allen</span>
        </div>
    </li>
</ul>
<hr/>
<div data-bind="text: displayedPeople"></div>

JS：

var viewModel= function () {
    var self = this;
    self.selectedPeople = ko.observableArray();
    self.displayedPeople = ko.computed(function() {
        var str = "";
        ko.utils.arrayForEach(self.selectedPeople(), function(item) {
            str += item + " ";
        });
        return str;
    });
};

ko.applyBindings(new viewModel());

如何使用knockout来显示所选复选框的值而无需foreach？

1 个答案: