Knockout - Wie man ein dynamisches beobachtbares Array mit einem neuen Wert zurücksetzt

Question

Ich kann das beobachtbare Array nicht mit einem neuen Wert zurücksetzen, sondern benutze etwas Lazy Loading Technic. Ich kann löschen, aber nicht zurücksetzen, aber ich kann keinen neuen dynamischen Wert hinzufügen.

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

Ich bin ein Neuling, großes Willkommen Ihre Antworten auf Knockout.

Answer 1

Probieren Sie etwas wie dies der Trick hier vergeht die Instanz des observableArray auf die Funktion und erhalten unsere Aufgabe

Ansichtsmodell gemacht:

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

Funktion:

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

Arbeitsprobe here

Answer 2

ich empfehlen die Verwendung eines Versprechens Bibliothek der asynchronen Ajax Last von neuen Produkten zu handhaben. Ich habe die jQuery-Implementierung im folgenden Beispiel verwendet. Beachten Sie, dass keine Abhängigkeit mehr vom Viewmodel benötigt.

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

Die zweite zu erwähnende Änderung ist die Möglichkeit, neue Objekte in ein Array zu schieben. .push() unterstützt eine Argumentliste:

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

Wenn Sie ein Array von Elementen haben Sie (zum Beispiel ein JSON Ergebnis) drücken wollen, würden Sie .apply() verwenden, sonst würden Sie das Array schieben selbst als erster Punkt :

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

Observable Arrays in Knockout unterstützen die gleiche Verwendung.

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