UI not detecting observable array

Question

Hi guys i have a strange problem with KO Observable array and my UI ,if i pass a fixed model to my observable array this one works ! and show the select options correctly but if make this one dynamically simply not show anything, i already made a first one select option to be dynamically working and it works perfect!, but the second option simply does not work.

Here are the code of my model for the options

var TipoModel = function(data) {
   var self = this;
   self.id = ko.observable(data.id);
   self.name = ko.observable(data.name);
};

var HabitacionModel = function(Huespedes) {
...
self.loadRoomsType = function() {
    ajax("/api/foro/loadrooms", {}, function(data) {

        self.tipoHabitacion = ko.observableArray([]);
        $.each(data, function(index, habitacion) {
            var hab = new TipoModel({
                id: habitacion.id,
                name: habitacion.nombreHabitacion
            });
            self.tipoHabitacion.push(hab);
        });
    }, "GET");
    console.log(self.tipoHabitacion());
}
self.loadpartnersType = function() {
    ajax("/api/foro/loadpartners", {}, function(data) {
        var self = this;
        self.tipoHuesped = ko.observableArray([]);
        $.each(data, function(index, socio) {

            var x = new TipoModel({
                id: socio.id,
                name: socio.nombre
            });

            self.tipoHuesped.push(x);
        });
        console.log(self.tipoHuesped());

    }, "GET");
}

the load rooms work but the parters function is not working and is the same code only a few changes but its the same .

<select style="width:30%; height:100%; margin-top:4px; background-color:transparent; border-color:#729A2B;" data-bind="options: tipoHuesped,
                        value: selectedHuesped,
                        optionsText: 'name', 
                        optionsValue: 'id',
                       optionsCaption: 'Escoge...'" required></select>

if i define like this the observable array from the start it works

self.tipoHuesped = ko.observableArray([
    new TipoModel({
        id: "1",
        name: "Aeroméxico"
    }),
    new TipoModel({
        id: "2",
        name: "Magnicharters"
    })
]);

i want to make this dynamically cause more data will be added soon, hope u can help me guys. Thanks

"self.tipoHabitacion = ko.observableArray([]);" should not be inside ajax callback - you create a new instance of the observableArray, but markup is aleady bound to previous one. — TSV
– TSV, Commented Apr 12, 2017 at 12:38
the same thing is with "self.tipoHuesped = ko.observableArray([]);" — TSV
– TSV, Commented Apr 12, 2017 at 12:38

TSV · Accepted Answer · 2017-04-12 12:44:39Z

2

"self.tipoHabitacion = ko.observableArray([]);" should not be inside ajax callback - you create a new instance of the observableArray, but markup is aleady bound to previous one.

So you should create observables once a time, and then add or remove items to/from them:

var TipoModel = function(data) {
   var self = this;
   self.id = ko.observable(data.id);
   self.name = ko.observable(data.name);
};

var HabitacionModel = function(Huespedes) {
...
self.tipoHabitacion = ko.observableArray([]);
self.tipoHuesped = ko.observableArray([]);
self.loadRoomsType = function() {
    ajax("/api/foro/loadrooms", {}, function(data) {

        self.tipoHabitacion.removeAll();
        $.each(data, function(index, habitacion) {
            var hab = new TipoModel({
                id: habitacion.id,
                name: habitacion.nombreHabitacion
            });
            self.tipoHabitacion.push(hab);
        });
    }, "GET");
    console.log(self.tipoHabitacion());
}
self.loadpartnersType = function() {
    ajax("/api/foro/loadpartners", {}, function(data) {
        var self = this;
        self.tipoHuesped.removeAll();
        $.each(data, function(index, socio) {

            var x = new TipoModel({
                id: socio.id,
                name: socio.nombre
            });

            self.tipoHuesped.push(x);
        });
        console.log(self.tipoHuesped());

    }, "GET");
}

answered Apr 12, 2017 at 12:44

TSV

7,6681 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kross Over a year ago

i already implement this code but it give me an error of Cannot read property 'push' of undefined , i implement the var self for the observables arrray , am i doing something wrong ?

Kross Over a year ago

already works only add a brackets in the observable but something curious happend , self.tipoHabitacion().push(hab); works perfect, but self.tipoHuesped().push(x); returns an error of element not found even this one its being initialized in the main object

TSV Over a year ago

"Cannot read property 'push' of undefined" message means that observable array is not created at this moment - your function is called before array is initialized.

TSV Over a year ago

self.tipoHabitacion().push(hab); - is not good because thus you modify the stored array, not observable collection. this leads that subscribers will not be notified about collection changed.

TSV Over a year ago

If you can create jsfiddle or SO code snippet, I can check it

|

Kross · Accepted Answer · 2017-04-12 19:04:19Z

0

i already realize whats all about it , didn`t realize the code was separated in objects, so i was trying to append the piece of code to the wrong object!

Im getting started with ko so didnt realize about all this ! Apologies to all !

answered Apr 12, 2017 at 19:04

Kross

1072 silver badges10 bronze badges

Collectives™ on Stack Overflow

UI not detecting observable array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related