javascript - 使用 knockout.js 如何刷新 Select 元素中的可观察数组

Question

加载下拉列表后，项目将正确填充。但是，当我单击“刷新”按钮时，下拉菜单项不会刷新。单击“刷新”按钮时数据绑定(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>

Answer 1

在这里，您将创建一个新数组，打破现有的绑定(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' });
};