Javascript 淘汰-如何用新值重置动态可观察数组

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

小提琴

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>

单击以填充新的选择值

---

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

尝试类似的方法这里的技巧是将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;
};

功能：

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

---

工作示例我建议使用promise库来处理新项目的异步Ajax加载。我在下面的示例中使用了jQuery的实现。请注意，

optionsProvider

如何不再需要对viewmodel有任何依赖关系

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

敲除中的可观察数组支持相同的用法

---

比较：

使用

self.PlantSelected.push（ob.get（“name”+k.））而不是
（）
（）
用于读取where，好像您需要向其中添加一些数据，您需要使用声明的Instance，即
sel.PlantSelected=ko.observearray（）
cheers不工作，只需在下拉列表中打印c即可。我不知道，请尝试发布的答案来解决这个问题。@supercool这将不起作用，因为我们的下拉列表是通过ajax调用设置的。所以会有一些延迟。与设置超时功能一起使用。这将不适用于我们的ajax调用，我将添加我的ajax调用。所以动态设置值这将不起作用，因为我在get函数中有一个ajax调用。setTimeout（function（）{self.options[name]（aa）；}，2000）；请检查设置超时功能。更新了fiddle Alex Filatov，该下拉列表在一个应用程序中多次调用。所以我使用了延迟加载技术