Использование нокаута с повторяющимися пользовательскими элементами управления

Question

У меня есть веб-страница, содержащая список игр. Каждая игра представлена ​​пользовательским элементом управления, который содержит несколько ярлыков, в которых хранятся свойства игры (время, баллы, игроки и т. Д.). Таким образом, один и тот же пользовательский элемент управления повторяется несколько раз на странице. Данные изменяются каждую минуту, чтобы поддерживать живой ковариатор игры. Я надеялся использовать нокаут для обновления всех меток в пользовательском элементе управления, но поскольку каждый пользовательский элемент управления должен привязываться к другим игровым данным, а пользовательский элемент управления не может иметь свою собственную модель представления, я не знаю, какой лучший подход к этому сценарий. Мне нужно что-то вроде динамического ViewModel и динамических атрибутов привязки данных, но я не мог найти никакой информации по этому вопросу.

Answer 1

Демонстрация template binding с использованием data и foreach с помощью этого же шаблона. Вы можете видеть в JS, что данные являются типом, game, но мы dislpaying их отдельно в 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 связывания выбирает любимую игру непосредственно. Нокаут передает текущий контекст как первый параметр для привязки к функциям, а так как наблюдаемые - это функции, это обновляет наблюдаемые напрямую, без необходимости использования функции-обертки.

Вы можете взглянуть на это в this fiddle. Не совсем понятно, что вы после, у вас нет кода в вашем вопросе. Надеюсь, это не слишком далеко.