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

Question

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

Answer 1

这是一个使用相同模板的模板绑定的演示。您可以在 JS 中看到数据是类型 a ，但我们在 HTML 中分别显示它们。dataforeachgame

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绑定直接选择喜欢的游戏。Knockout 将当前上下文作为第一个参数传递给函数绑定，并且由于 observable 是函数，因此这会直接更新 observable，而不需要包装函数。

你可以在这个小提琴中看看这个。它并不完全清楚你之后的位置，你的问题中没有任何代码。我希望这不会太远。