jquery - 将绑定应用于动态生成的 html
问题描述
我正在创建一个应用程序来管理一些列表项。该应用程序有一个包含可用列表项的菜单,用户可以选择一些要添加的列表项。选中的 List 项显示在一个表格中,问题是每个 ListItem 都有一个 Category 并且每个 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()
}
})
};
问题是数据绑定不适用于新添加的项目。我错过了什么吗?
解决方案
看来问题很简单,在我的updateColumnPricesModel
:
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()
}
})
};
self.getColumnPricesModel = function(isNew = true) {
let columnModel = isNew ? ko.observableArray([]) : [];
self.theList.selectedColumns().forEach((column) => {
let model = {
title: ko.observable(column.title()),
price: ko.observable('')
};
columnModel.push(model)
});
return columnModel;
};
在每次更新中,我都将 columnPrices 设置为新的observableArray
.
listItem.columnPrices = self.getColumnPricesModel()
我把它改成了
listItem.columnPrices(self.getColumnPricesModel(false))
它奏效了。
推荐阅读
- scrapy - 当我尝试启动蜘蛛时,Scrapyd api get 和 exeption
- reactjs - 如何设置 HOC 的“属性”?
- javascript - 替换为其他文本
- ios - Flutter,无法为 iOS 构建:缺少 .h 文件
- android - 在 ScrollView 内的 Textview 中复制文本
- html - 如何在另一个 div 中的两个 div 之间插入一些水平空间?
- html - 如何修复导航栏上的悬停下拉菜单?
- python - sklearn.preprocessing.MinMaxScaler:不可广播的输出形状错误
- python - Python Loop 超出范围
- ios - 从 iOS 通知中获取有效负载数据的问题