Нокаут - повторное использование такой же вид модели

Question

Давайте возьмем пример из корзины ...

Каждый раз, когда пользователь выбирает элемент, мы переместить его в линию нашей корзине.

/* would normally autoincrement */ 
var num = '1'; 
document.getElementById('cart').innerHTML = oldHTML + 
"<div id='line" + num + "'> 
<input type='text' data-bind='value: quantity'> 
<input type='text' data-bind='value: price'> 
<input type='text' data-bind='value: extendedPrice'> 
</div>";` 

var lineVM() { 
    var self = this; 
    self.quantity = ko.observable(); 
    self.price = ko.observable(); 
    self.extendedPrice = ko.computed(function() {return self.price() * self.quantity();}); 
} 

ko.applyBindings(new lineVM(), document.getElementById('line' + num)); 

Как строки добавляются, мы имеем line1, line2 и т.д ...

Из документов:

При желании, вы можете передать второй параметр, чтобы определить, какая часть документ, который вы хотите найти для атрибутов привязки данных. Например, ko.applyBindings (myViewModel, document.getElementById ('someElementId')). Это ограничивает активацию элемента с идентификатором someElementId и его потомками, что полезно, если вы хотите иметь несколько моделей просмотра и связывать их с другой областью страницы.

Тестирование показывает, что нет разделения ... Если я повторно использую модель представления, добавив еще одну строку «пробелы» в одну перед ней. Однако мне нужна одна и та же модель представления для неопределенного количества строк. Я не хочу создавать 100 моделей взглядов для каждой потенциальной линии, и я не хочу, чтобы моя корзина ломалась для клиента, у которого будет 101 элемент.

Итак, что, если у меня есть одна модель представления и вы хотите связать ее с несколькими регионами на странице? Документы на самом деле не говорят. Я делаю это неправильно, я пытаюсь сделать что-то нокаутом, которого не допускают?

Большое спасибо за помощь.

Answer 1

Я думаю, вы должны переосмыслить свой дизайн в целом. Почему бы не сделать что-то подобное?

var viewModel = function() { 
    var self = this; 
    self.items = ko.observableArray(); 
    self.addItem = function(num, quantity, price) { 
     var item = { 
      num: num, 
      quantity: ko.observable(quantity), 
      price: ko.observable(price) 
     }; 
     item.extendedPrice = ko.computed(function() { 
      return item.price() * item.quantity(); 
     }, self); 
     self.items.push(item); 
    }; 
}; 

ko.applyBindings(new viewModel()); 

Html:

<div data-bind="foreach: items"> 
    <div data-bind="attr: { id: 'line' + num }"> 
     <input type="text" data-bind="value: quantity" /> 
     <input type="text" data-bind="value: price" /> 
     <input type="text" data-bind="value: extendedPrice" readonly="readonly" /> 
    </div> 
</div> 

Принцип заключается в том, чтобы добавить элементы в observableArray, чтобы изменить вид. Вы действительно не должны динамически создавать модели просмотра.

С помощью этого кода вы должны иметь способ позвонить self.addItem, и это зависит от остальной части вашего кода.

Edit:, кстати, линия var lineVM() { в вашем коде должен быть var lineVM = function() {

Кроме того, извините, если кто-то из этого кода не работает, это проверялось, но должно помочь вам получить идею.