使用 KnockOutJS 绑定复选框答案

【问题标题】：Binding checkboxes using KnockOutJS使用 KnockOutJS 绑定复选框
【发布时间】：2013-07-23 02:52:16
【问题描述】：

在我的应用程序中，有一段动态加载的“位置”。位置是对象，而不是简单的字符串（它们具有名称、id 和其他属性）。我需要能够绑定到已检查的位置，并且还想跟踪在隐藏输入中检查了哪些位置，例如存储以逗号分隔的 locationId 字符串。

我在这里找到了一个很好的例子： Working with a list of checkboxes in knockoutjs

这让我想到了这个 JSFiddle： http://jsfiddle.net/rniemeyer/Jm2Mh/

但是，当我尝试使用我的位置对象重新编写它时，它会抛出一个错误：

Uncaught ReferenceError: Unable to parse bindings. 
Bindings value: attr: { value: $data }, checked: $item.selections 
Message: $item is not defined

这是我迄今为止所做的 JSFiddle。（如果按 F12 并运行它，您可以看到上面的错误）。 http://jsfiddle.net/toddhd/BkUUX/3/

虽然错误很明显，但 $item 没有定义，但我真的不明白 $item 是什么以及为什么它在第一个示例中有效，而在我的示例中无效。

感谢您提供的任何帮助。如果有人可以帮助我重新编写代码以显示 selectedLocations 也可以加分。 :)

【问题讨论】：

标签： knockout.js

【解决方案1】：

Here at Jsfiddle您会找到解决问题的有效解决方案，它还会显示选定的位置。

html代码如下：

<div data-bind="template: { name: 'locationTmpl', foreach: locations, templateOptions: { selections: selectedLocations } }">/</div>
<script id="locationTmpl" type="text/html">

    <input type="checkbox" data-bind="attr: { value: $data }, checked: $data.isSelected" />
    <span data-bind="text: $data.DisplayName"></span>
</script>
<hr />
<div data-bind="text: JSON.stringify(ko.toJS(selectedLocations), null, 2)"></div>
<hr />

javascript代码如下：

<script type="text/javascript">
    function MyLocation(locationId, displayName, selected) {
        this.LocationId = ko.observable(locationId);
        this.DisplayName = ko.observable(displayName);
        this.isSelected = ko.observable(selected);
    }

    var viewModel = function (items) {
        this.locations = ko.observableArray([
            new MyLocation('1', 'Starbucks1'),
            new MyLocation('2', 'Starbucks2', true),
            new MyLocation('3', 'Starbucks3'),
            new MyLocation('4', 'Starbucks4'),
            new MyLocation('5', 'Starbucks5')
        ]);

        //self.selectedLocations = ko.observableArray([self.locations()[1]]);                              
        this.selectedLocations = ko.computed(function () {
            return ko.utils.arrayFilter(
                this.locations(), function (item) {
                    return item.isSelected();
                }
                );
        }, this);
    };

    ko.applyBindings(new viewModel());
</script>

我也介绍了一个相同代码的博客，你可以查看by clicking this link

【讨论】：

谢谢伊姆兰。您的意见非常有帮助，我感谢有关 selectedLocations 的额外细分。另一个答案之所以获得好评，仅仅是因为它是第一个，两个答案几乎相同，而且 SethCran 的 selectedLocation 更简洁一些。
不客气，托德！我很高兴它对您有所帮助。问候

【解决方案2】：

$Item 不可用，因为它在淘汰赛的默认模板机制中不受支持。这实际上是 jQuery 的一部分（参见答案here）。如果你想使用它，你必须重写默认的敲除模板机制。

也就是说，我在这里展示了另一种不需要here 的方法来做到这一点。本质上，只需为每个模型对象添加一个 isSelected 属性并解决这个问题，这当然是最简单的方法。

var location = function (locationId, displayName, selected) {
    var self = this;
    self.LocationId = locationId;
    self.DisplayName = displayName;
    self.isSelected = ko.observable(selected);

};

此外，小提琴显示了如何显示选定的位置。

【讨论】：