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

尝试这样的事情技巧这里是将 observableArray 的实例传递给函数并完成我们的工作

视图模型：

 var  ViewModel = function() {
        var self = this;
        var k = 1;
        var ob = new optionsProvider(self);
        self.PlantSelected = ko.observableArray(); //Declare it as observableArray
        ob.get("name" + k, '',self.PlantSelected) // call the function passing observableArray instance 
        self.fillNewSelect = function() 
        {
          self.PlantSelected.removeAll();
          ob.get("name", ''+ k,self.PlantSelected)
           k++;
        };
  };
 ko.applyBindings(new ViewModel());

函数：

  var i = 1;
  optionsProvider = function(self) {
      var self = self || {};
        self.options = {};
          self.get = function(name, initialValue,instance) { //pass observableArray instance here
          if (!self.options[name] || self.options[name]()) {
            var requestHeader = '';

            setTimeout(function() {
            var aa = [{name: "plant 1" + i, selected: true}, 
                      {name: "palnt 2" + i, selected: false}];
                   instance(aa); // assign data to instance 
             },2000);
          i++;
       }
    return true;      
   };
  return self;
};

工作样本here

Answer 2

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

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/

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

Knockout - How to reset Dynamic observable array with new value

javascript

lazy-loading

observablecollection

knockout.js