CODEWITHSUNDEEP
javascriptknockout.js
themarcuz
themarcuz

Reputation: 2583

Cannot add item to observableArray

This should be a pretty trivial question, but it's getting me crazy! I't like step 1 of the tutorial, but I can't it to work.... so this is my code:

/* Model definition */
    var PrivateSalesMenuModel = function () {
    var self = this;
    this.privateSales = ko.observableArray();
    this.addPrivateSale = function (privateSale) {
        var newPs = new PrivateSaleMenuItem(privateSale);
        self.privateSales.push(newPs);
    };
};

var PrivateSaleMenuItem = function (ps) {
    this.title = ps.Description;
    this.hasActual = ps.HasActual;
    this.hasSale = ps.HasSale;
    this.listaId = ps.ListaId;
    this.isSelected = false;
};
/* end model definition*/

var privateSalesMenuModel = new PrivateSalesMenuModel();

ko.applyBindings(privateSalesMenuModel);

Pretty simple... I have an object that represent my model, that is a collection of others objects, called PrivateSaleMenuItem. Problem is that addPrivateSale didn't work as expected. Somewhere in the code I do 

privateSalesMenuModel.addPrivateSale(ps);

where ps is an object created by other JavaScript functions... anyway is exactaly the object I need in the constructor of PrivateSaleMenuItem, so it's consistency is not the problem. The problem seems o be that self.privateSales.push(newPs); doesn't work... after that inocation, the number of privateSalesMenuModel.privateSales is still 0. Why is that?

Edited

I put toghether an example in jsFiddle with this same exact code, and it works fine, so I suspect something in my page make the push method of observableArray stop working... how can I find out what it is?

ops... the link of jsfiddle http://jsfiddle.net/YBHf5/

Upvotes: 0

Views: 91

Answers (2)

themarcuz
themarcuz

Reputation: 2583

Problem solved.... it was a trivial problem indeeed, with a trivial solution: I just needed to push the external script declaration at the end of the page. I had the script (in which the code provided on the question is present) at the top of the page, inside the body, but above anything else. Just putting the script reference at the end of the body and everything works as expected again. Sorry for wasting your time... but this little issue is very hard to find out, 'cause the reason is not clear at all while debugging

Upvotes: 0

hutchonoid
hutchonoid

Reputation: 33326

It looks like you are mixing this and self in your code here:

    var PrivateSalesMenuModel = function () {
    var self = this;
    this.privateSales = ko.observableArray();
    this.addPrivateSale = function (privateSale) {
        var newPs = new PrivateSaleMenuItem(privateSale);
        self.privateSales.push(newPs);
    };
};

Changing them to all use self fixes it like this:

var PrivateSalesMenuModel = function () {
    var self = this;
    self.privateSales = ko.observableArray();
    self.addPrivateSale = function (privateSale) {
        var newPs = new PrivateSaleMenuItem(privateSale);
        self.privateSales.push(newPs);
    };
};

Please see working fiddle here:

http://jsfiddle.net/YBHf5/1/

Upvotes: 1

Related Questions