Я создаю приложение для управления некоторыми элементами списка. В приложении есть меню с доступными элементами списка, и пользователь выбирает некоторые элементы списка для добавления. Выбранные элементы списка отображаются в таблице, суть в том, что каждый элемент ListItem имеет категорию, и каждый элемент ListItem должен отображаться в одной и той же категории.
Это метод добавления нового элемента ListItem:
self.addListItem = function () {
let $itemsTable = $('#itemsTable');
if (self.wineList.listItemModelsByCat.hasOwnProperty(this.category.title())) {
// the category is added already, just add the list item
self.wineList.listItemModelsByCat[this.category.title()].listItems.push({
item: this,
columnPrices : self.getColumnPricesModel()
})
} else {
self.wineList.listItemModelsByCat[this.category.title()] = {
catTitle: ko.observable(this.category.title()),
listItems: ko.observableArray([{
item: this,
columnPrices: self.getColumnPricesModel()
}])
};
self.wineList.listItems.push(this);
self.listItems.remove(this);
// must create new model for this category
// and manage the ui
// add the category
let categoryMarkup = '<tr>' +
`<td class="text-center list-category"
colspan="2" id="category_${this.category.id()}"> ${this.category.title()} </td>` +
'</tr>';
$itemsTable.find('tbody')
.append(categoryMarkup);
// add category items
let itemMarkup = '<tr class="spacer"> </tr>';
itemMarkup += `<tr>
<td data-bind="text: wineList.listItemModelsByCat['${this.category.title()}']
.listItems()
.last()
.item
.title">
</td>
<td>
<ul class="inline-list" data-bind="foreach: wineList.listItemModelsByCat['${this.category.title()}']
.listItems()
.last()
.columnPrices">
<li style="float: right" class="inline-list-item" >
<input type="text" data-bind="textInput: price">
</li>
</ul>
</td>
</tr>`;
$itemsTable.find('tbody')
.append(itemMarkup);
ko.applyBindings(self, $itemsTable.find('tbody > tr:last-child')[0])
//
}
};
self.getColumnPricesModel = function() {
let columnModel = ko.observableArray([]);
self.wineList.columns().forEach((column) => {
let model = { title : ko.observable(column.title()),
price : ko.observable('')};
columnModel.push(model)
});
return columnModel;
};
self.updateColumnPricesModel = function() {
Object.keys(self.wineList.listItemModelsByCat).forEach((key) => {
let item = self.wineList.listItemModelsByCat[key];
for (let i =0; i < item.listItems().length; i++) {
let listItem = item.listItems()[i];
listItem.columnPrices = self.getColumnPricesModel()
}
})
};
Проблема в том, что привязка данных не работает для вновь добавленных элементов. Я что-то упустил?