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

我建议使用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中的可观察数组支持相同的用法。

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

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

Viewmodel:

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

工作样本此处