Knockout - How to reset Dynamic observable array with new value

Question

I can't reset observable array with new value am using some lazy loading Technic. I can clear but can't reset, but it not allowing me to add new dynamic value.

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>

I am a newbie to knockout, great welcome your answers.

use `self.PlantSelected.push(ob.get("name" + k, ''));` instead `()` . `()` used to read where as if you need to add some data to it you need to use the declared instace i.e `sel.PlantSelected=ko.observableArray()` cheers — super cool, Jun 04 '15 at 07:53
@supercool thats will not work since our dropdown set via ajax call. so it wil have some delay. use with set timeout fucntion. that will not work — muhammed uvais, Jun 04 '15 at 08:47
timeour for ajax call,where i wil add my ajax call.so dynamically set value — muhammed uvais, Jun 04 '15 at 08:48
just try this http://jsfiddle.net/supercool/kspxa8as/5/ . all process will be async this is better way making things . — super cool, Jun 04 '15 at 09:46
i think you put ajax call inside viewmodel, actually that get function is for fetch options from ajax,so please put settimeout inside the get and please have a try. — muhammed uvais, Jun 04 '15 at 09:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79640/discussion-between-muhammed-uvais-and-super-cool). — muhammed uvais, Jun 04 '15 at 09:57
@supercool please see caht, http://jsfiddle.net/kspxa8as/, i wil replace the settimeout with ajax call in the above fiddle. — muhammed uvais, Jun 04 '15 at 10:01
updated my answer(ajax call way) which should work in all cases irrespective . cheers — super cool, Jun 04 '15 at 11:25

score 1 · Answer 1 · answered Jun 04 '15 at 10:28

I recommend the use of a promise library to handle the asynchronous Ajax load of new items. I've used jQuery's implementation in the sample below. Notice how optionsProvider no longer requires any dependency on the 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());

The second change to mention is the way to push new objects into an array. .push() supports an argument list:

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

If you have an array of items you want to push (for example a JSON result), you would use .apply(), otherwise you would push the array itself as the first item:

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

Observable arrays in knockout support the same usage.

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

super cool · Accepted Answer · 2015-06-04T11:25:09.310

Try something like this the trick here is passing the instance of the observableArray to the function and get our job done

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

function :

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

working sample here

this will not work,since i have a ajax call inside get function. setTimeout(function() { self.options[name](aa); }, 2000); please check with setTime out function. — muhammed uvais, Jun 04 '15 at 08:44
updated fiddle [http://jsfiddle.net/kspxa8as/4/](http://jsfiddle.net/kspxa8as/4/) — muhammed uvais, Jun 04 '15 at 08:46
Alex Filatov, the dropdown called many times many section in one application. so i have used lazy loading Technic — muhammed uvais, Jun 04 '15 at 08:49

Knockout - How to reset Dynamic observable array with new value

2 Answers2