Backbone.js - Collection is undefined

Question

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.

Answer 1

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) {

Answer 2

You should change

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

        });

to

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

        });