使用重複用戶控件敲除

我有一個包含遊戲列表的網頁。每個遊戲都由一個用戶控件呈現，其中包含一些標籤，用於保存遊戲的屬性（時間，分數，玩家等）。因此，相同的用戶控件在頁面上重複幾次。數據每分鐘更改一次以支持遊戲的實時協作。我希望能用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

使用重複用戶控件敲除

回答

相關問題