0

在我的应用程序中，有一段动态加载的“位置”。位置是对象，而不是简单的字符串（它们具有名称、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 也可以加分。:)

4

2 回答 2

3

在 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>

我也介绍了一个相同代码的博客，你可以点击这个链接查看

于 2013-07-23T08:42:03.427 回答
1

$Item 不可用，因为它在淘汰赛的默认模板机制中不受支持。这实际上是 jQuery 的一部分（请参阅此处的答案）。如果你想使用它，你将不得不覆盖默认的敲除模板机制。

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

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

};

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

于 2013-07-23T03:44:55.193 回答