使用基因敲除.js如何刷新Select元素中的可觀察數組

Question

加載下拉列表后，將正確填充項目。 但是，當我單擊“刷新”按鈕時，下拉菜單項不會被刷新。 單擊刷新按鈕無法進行數據綁定。 單擊“刷新”按鈕后，我希望看到“瑪麗”和“桑德拉”。

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