我有一個包含遊戲列表的網頁。每個遊戲都由一個用戶控件呈現,其中包含一些標籤,用於保存遊戲的屬性(時間,分數,玩家等)。因此,相同的用戶控件在頁面上重複幾次。數據每分鐘更改一次以支持遊戲的實時協作。 我希望能用knockout來更新用戶控件中的所有標籤,但是由於每個用戶控件應該綁定到不同的遊戲數據,並且用戶控件不能擁有自己的視圖模型,所以我不知道最佳方法是什麼場景。 我需要類似動態ViewModel和動態數據綁定屬性,但我無法找到有關該主題的任何信息。使用重複用戶控件敲除
1
A
回答
1
下面是使用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。它不完全清楚你在哪裏,你沒有任何代碼在你的問題。我希望這不是太遙遠。
相關問題
- 1. 可重複使用的屬性驗證與敲除
- 2. 刪除用戶控件並重畫?
- 3. 用戶控件(?),用於可重複使用WPF菜單
- 4. 與重複類敲除css綁定
- 5. 用戶控件重複使用表單標籤消失
- 6. 可重複使用的用戶控件中的按鈕
- 7. 使用敲除映射插件
- 8. 使用jQuery getJSON敲除JS
- 9. 重複用戶界面中的用戶控件
- 10. 複合控件的自定義敲除綁定
- 11. ASP.NET MVC可重複使用的控件
- 12. 清除表格使用敲除
- 13. 使用ant刪除重複文件?
- 14. 使用Awk刪除重複文件
- 15. 如何檢查用戶是否使用敲除登錄
- 16. C#用戶控件重繪
- 17. 敲除複選框綁定
- 18. 數組敲除複選框?
- 19. 敲除恢復更改
- 20. 刪除使用array_unique重複
- 21. 刪除重複使用C#
- 22. 使用ListIterator刪除重複
- 23. 使用DISTINCT消除重複
- 24. 使用重複控件和自定義控件的遞歸
- 25. 使用打字稿的敲除複選框
- 26. 使用敲除複選框的多個排序
- 27. 使用set()從列表中刪除重複的用戶
- 28. 用敲除貼圖插件節流
- 29. 客戶端使用jquery過濾數據,敲除
- 30. 在Silverlight中重用用戶控件
您能否向我們提供您迄今爲止的?一些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