javascript - 将 Knockout 与重复的用户控件一起使用

Question

我有一个包含游戏列表的网页。每个游戏都由一个用户控件呈现，其中包含一些保存游戏属性(时间、分数、玩家等)的标签。因此，相同的用户控件会在页面上重复几次。 数据每分钟都会变化，以支持游戏的实时同步。 我希望使用 knockout 来更新用户控件中的所有标签，但是由于每个用户控件都应该绑定(bind)到不同的游戏数据，并且用户控件不能拥有自己的 View 模型，所以我不知道这种情况的最佳方法是什么。 我需要诸如动态 ViewModel 和动态数据绑定(bind)属性之类的东西，但我找不到有关该主题的任何信息。

Answer 1

这是 template binding 的演示在同一模板中同时使用 data 和 foreach。您可以在 JS 中看到数据是类型，一个 game，但我们在 HTML 中单独显示它们。

HTML

<!-- ko if: favoriteGame -->
<h1>Favorite Game</h1>
<div data-bind="template: { name: 'gameTemplate', data: favoriteGame }"></div>
<!-- /ko -->

<h1>All Games</h1>
<div data-bind="template: { name: 'gameTemplate', foreach: games }"></div>

<script type="text/ko" id="gameTemplate">
<div>
    <span class="gameName" data-bind="text: name"></span>
    <span data-bind="text: publisher"></span>
    <input data-bind="value: score" />
    <button data-bind="click: $parent.favoriteGame">Favorite</button>
</div>
</script>

Javascript

var Game = function(data) {
    this.name = ko.observable(data.name || "");
    this.publisher = ko.observable(data.publisher || "");
    this.score = ko.observable(data.score || 0);
};

var ViewModel = function(init) {
    var self = this;
    self.favoriteGame = ko.observable();
    self.games = ko.observableArray(ko.utils.arrayMap(init, function(g) {
        return new Game(g);
    }));
};

请注意，click: $parent.favoriteGame 绑定(bind)会直接选择最喜欢的游戏。 Knockout 将当前上下文作为函数绑定(bind)的第一个参数传递，并且由于可观察量是函数，因此这会直接更新可观察量，而不需要包装函数。

您可以在 this fiddle 中查看此内容。它并不完全清楚你在哪里，你的问题中没有任何代码。我希望这不会太遥远。