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

Question

加载下拉列表时，项目已正确填充。但是，当我单击“刷新”按钮时，下拉项不会刷新。单击“刷新”按钮时数据绑定不起作用。单击刷新按钮后，我希望看到 '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

您在这里创建了一个新数组，打破了现有的绑定：

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' });
};

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

With knockout.js how to refresh observable array in a Select element

html

javascript

knockout.js