加载下拉列表后,项目将正确填充。但是,当我单击“刷新”按钮时,下拉菜单项不会刷新。单击“刷新”按钮时数据绑定(bind)不起作用。单击“刷新”按钮后,我希望看到“Mary”和“Sandra”。
这是 JavaScript:
$(function () {
function viewModel() {
var self = this;
self.persons = ko.observableArray([]);
self.persons.push({
id: 1,
name: 'John'
});
self.persons.push({
id: 2,
name: 'Paul'
});
self.refreshPersonList = function () {
self.persons = ko.observableArray([]);
self.persons.push({ id: 3, name: 'Mary' });
self.persons.push({ id: 4, name: 'Sandra' });
};
}
ko.applyBindings(new viewModel());
});
和 HTML:
<select data-bind="options: $root.persons(), optionsValue: 'id', optionsText: 'name'"></select>
<button value="Refresh" data-bind="event: {click : $root.refreshPersonList() }">Refresh Person List</button>
最佳答案
在这里,您将创建一个新数组,打破现有的绑定(bind):
self.persons = ko.observableArray([]);
尝试清空数组:
self.refreshPersonList = function () {
self.persons.removeAll(); //Empty array
self.persons.push({ id: 3, name: 'Mary' });
self.persons.push({ id: 4, name: 'Sandra' });
};
关于javascript - 使用 knockout.js 如何刷新 Select 元素中的可观察数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28954659/