使用重复用户控件敲除

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

来源

2013-03-18 Offa

您能否向我们提供您迄今为止的？一些HTML？一些JavaScript？当你说用户控件时，你在谈论ASP.Net服务器控件吗？ – 2013-03-18 14:51:12

控件绝对可以拥有自己的视图模型，并绑定到不同的数据。看看'template'和'foreach'绑定。 – Tyrsius 2013-03-18 19:27:06

Tyrsius - 感谢您将我指向正确的方向，我从不知道您可以将用户控件标记声明作为模板。 – Offa 2013-03-19 11:09:15

下面是使用data和foreach的template binding与相同模板的演示。您可以在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绑定直接选择喜欢的游戏。 Knockout传递当前上下文作为函数绑定的第一个参数，并且由于observables是函数，因此它会直接更新observable，而不需要包装函数。

你可以看看this fiddle。它不完全清楚你在哪里，你没有任何代码在你的问题。我希望这不是太遥远。

来源

2013-04-03 15:53:43 Tyrsius

使用重复用户控件敲除

回答

相关问题