I'm trying to learn backbone.js but the I'm stuck on fetching the json and adding to the collection.The collection is undefined and I don't know why. Code:

$(document).ready(function() {
    (function($) {
        //model
        window.Wine = Backbone.Model.extend();

        window.WineCollection = Backbone.Model.extend({
            url: "http://localhost/bootstrap/json.php",
            model: Wine
        });


        //views
        window.WineItemView = Backbone.View.extend({
            template: _.template($("#wine-item-template").html()),
            tagName: 'li',
            render: function() {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });

        window.WineListView = Backbone.View.extend({
            tagName: 'ul',
            initialize: function() {
                this.model.bind('reset', this.render, this);

            },
            render: function() {

                _.each(this.model.models, function(wine) {
                    $(this.el).append(new WineItemView({
                        model: wine
                    }).render().el);
                }, this);
                return this;
            }
        });


        window.WineView = Backbone.View.extend({
            template: _.template($('#wine-template').html()),
            render: function() {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });
        //Router
        window.AppRouter = Backbone.Router.extend({
            routes: {
                '': 'home',
                'wines/:id': "wineDetails"
            },
            home: function() {
                this.wineList = new WineCollection();

                this.wineListV = new WineListView({
                    model: this.wineList
                });
                this.wineList.fetch({success: function(){
                    console.log(this.wineList.models); // => 2 (collection have been populated)
                }});
                console.log(this.wineListV);

                $("#winelist").html(this.wineListV.render().el);
            },
            wineDetails: function(id) {
                this.wine = this.wineList.get(id);
                console.log(id);
                this.wineView = new WineView({
                    model: this.wine
                });
                $("#container").empty().html(this.wineView.render().el);
            }
        });


    })(jQuery);

    var app = new AppRouter();
    Backbone.history.start();
});

json.php returns:

[
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   },
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   },
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   }
]

I'm testing this on my localhost.

I'm trying to learn backbone.js but the I'm stuck on fetching the json and adding to the collection.The collection is undefined and I don't know why. Code:

$(document).ready(function() {
    (function($) {
        //model
        window.Wine = Backbone.Model.extend();

        window.WineCollection = Backbone.Model.extend({
            url: "http://localhost/bootstrap/json.php",
            model: Wine
        });


        //views
        window.WineItemView = Backbone.View.extend({
            template: _.template($("#wine-item-template").html()),
            tagName: 'li',
            render: function() {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });

        window.WineListView = Backbone.View.extend({
            tagName: 'ul',
            initialize: function() {
                this.model.bind('reset', this.render, this);

            },
            render: function() {

                _.each(this.model.models, function(wine) {
                    $(this.el).append(new WineItemView({
                        model: wine
                    }).render().el);
                }, this);
                return this;
            }
        });


        window.WineView = Backbone.View.extend({
            template: _.template($('#wine-template').html()),
            render: function() {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });
        //Router
        window.AppRouter = Backbone.Router.extend({
            routes: {
                '': 'home',
                'wines/:id': "wineDetails"
            },
            home: function() {
                this.wineList = new WineCollection();

                this.wineListV = new WineListView({
                    model: this.wineList
                });
                this.wineList.fetch({success: function(){
                    console.log(this.wineList.models); // => 2 (collection have been populated)
                }});
                console.log(this.wineListV);

                $("#winelist").html(this.wineListV.render().el);
            },
            wineDetails: function(id) {
                this.wine = this.wineList.get(id);
                console.log(id);
                this.wineView = new WineView({
                    model: this.wine
                });
                $("#container").empty().html(this.wineView.render().el);
            }
        });


    })(jQuery);

    var app = new AppRouter();
    Backbone.history.start();
});

json.php returns:

[
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   },
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   },
   {
      "name":"Wine 1",
      "price":"100",
      "status":"available"
   }
]

I'm testing this on my localhost.

• javascript
• backbone.js
• javascript-framework

3 Answers 3

You made a silly typo:

window.WineCollection = Backbone.Model.extend

should be

window.WineCollection = Backbone.Collection.extend

Note that by convention your WineListView class should use this.collection to refer to an instance of WineCollection and Backbone collection objects provide the underscore iteration methods so instead of

.each(this.model.models, function(wine) {

do

this.collection.each(function (wineModel) {

You should change

window.WineCollection = Backbone.Model.extend({
            model: Wine,
            url: "wine.json"

        });

to

window.WineCollection = Backbone.Collection.extend({
            model: Wine,
            url: "wine.json"

        });

Wele to SO :) this is your 1st questoin so let me make it memorable one. when you say collection is undefined you could have provided us the Line number(or highlighted it) so that it would be easy to debug. inside initialize method you have to put _.bindAll(this) in the case you wanted to reference the object that you wanted to( defaults to window object ) instead of below do #1

 _.each(this.model.models, function (wine) {
     $(this.el).append(new WineItemView({
         model: wine
     }).render().el);
 }, this);

1

 this.model.each(function (wine) {
     $(this.el).append(new WineItemView({
         model: wine
     }).render().el);
 }, this);

try this too

 window.WineListView = Backbone.View.extend({
     tagName: 'ul',
     initialize: function () {
         _.bindAll(this);
         this.model.on('reset', this.render);
     },
     render: function () {
         #1
     }
 });

Just in case you got lost here is a copy of the code http://jsbin./axixir/edit#javascript