javascript - Knockout - 如何用新值重置动态可观察数组

Question

我无法使用一些延迟加载技术重置具有新值的可观察数组。 我可以清除但不能重置，但它不允许我添加新的动态值。

fiddle http://jsfiddle.net/kspxa8as/

js

var i = 1;
            optionsProvider = function(self) {
                var self = self || {};
                self.options = {};
                self.get = function(name, initialValue) {
                    if (!self.options[name]) {
                        console.log("Called - " + name);
                        self.options[name] = ko.observableArray([initialValue]);
                        var requestHeader = '';
                        setTimeout(function() {
                            var aa = [{name: "plant 1" + i, selected: true}, {name: "palnt 2" + i, selected: false}];
                            self.options[name](aa);
                            i++;
                        }, 2000);
                    }
                    return self.options[name];
                };
                return self;
            };
            ViewModel = function() {
                var self = this;
                var k = 1;
                var ob = new optionsProvider(self);
                self.PlantSelected = ob.get("name" + k, '');
                self.fillNewSelect = function() {
                    self.PlantSelected.removeAll();
                    self.PlantSelected().push(ob.get("name" + k, ''));
                    k++;
                };
            };
            ko.applyBindings(new ViewModel());

HTML

<select class="n_imported_country"                     
            data-bind="options: PlantSelected,
                               optionsText :'name'   
            "
            >
    </select>
    <div data-bind="click: function(){
         $root.fillNewSelect();
    }">click to fill new select value</div>

我是 knockout 的新手，非常欢迎您的回答。

Answer 1

我建议使用 promise 库来处理新项目的异步 Ajax 加载。我在下面的示例中使用了 jQuery 的实现。请注意 optionsProvider 如何不再需要对 View 模型的任何依赖。

var optionsProvider = function (name, initialValue) {
    return function () {
        return $.get("/target/url", {parameter: "value"})
        .fail(function () {
            console.log("request to get new items failed", arguments);
        });
    };
};

var ViewModel = function () {
    var self = this,
        k = 1,
        ob = optionsProvider("name" + k, '');

    self.PlantSelected = ko.observableArray([]);
    self.fillNewSelect = function () {
        ob().then(function (newData) {
            var p = self.PlantSelected;
            p.removeAll();
            p.push.apply(p, newData);
        });
    };

    // init
    self.fillNewSelect();
};
ko.applyBindings(new ViewModel());

要提到的第二个变化是将新对象插入数组的方式。 .push() 支持参数列表:

arr.push('a', 'b', 'c')

如果您有一组要推送的项目(例如 JSON 结果)，您将使用 .apply()，否则您将推送数组本身 作为第一项:

arr.push.apply(arr, ['a', 'b', 'c']);

knockout 中的 Observable 数组支持相同的用法。

比较:http://jsfiddle.net/kspxa8as/6/