Knockout - Come reimpostare la matrice osservabile dinamica con il nuovo valore

Question

Non riesco a ripristinare la matrice osservabile con il nuovo valore usando una tecnica di caricamento lenta. Posso cancellare ma non posso resettare, ma non mi permette di aggiungere un nuovo valore dinamico.

violino 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> 

Sono un novizio a eliminazione diretta, grande benvenuto le vostre risposte.

Answer 1

provare qualcosa di simile l'trucco qui sta passando l'istanza del observableArray alla funzione e ottenere il nostro lavoro fatto

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()); 

funzione:

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

campione di lavoro here

Answer 2

Si consiglia l'utilizzo di una libreria di promessa per gestire il carico Ajax asincrono di nuovi elementi. Ho usato l'implementazione di jQuery nell'esempio qui sotto. Si noti come optionsProvider non richiede più alcuna dipendenza da 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()); 

La seconda modifica menzione è il modo per spingere nuovi oggetti in una matrice. .push() supporta una lista di argomenti:

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

Se si dispone di una serie di elementi che si desidera spingere (per esempio un risultato JSON), si usa .apply(), altrimenti si sarebbe spingere la matrice sé come primo elemento :

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

array osservabile knockout supportano lo stesso uso.

Confronta: http://jsfiddle.net/kspxa8as/6/