Backbone.js - 集合未定义

Posted 2023-02-22

【中文标题】Backbone.js - 集合未定义

【英文标题】：Backbone.js - Collection is undefined

【发布时间】：2012-07-18 14:03:14

【问题描述】：

我正在尝试学习backbone.js，但我一直在获取json并添加到集合中。集合是未定义的，我不知道为什么。 代码：

$(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 返回：

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

我正在我的本地主机上测试这个。

【参考方案1】：

你犯了一个愚蠢的错字：

window.WineCollection = Backbone.Model.extend

应该是

window.WineCollection = Backbone.Collection.extend

请注意，按照惯例，您的 WineListView 类应该使用 this.collection 来引用 WineCollection 的实例，并且 Backbone 集合对象提供下划线迭代方法，而不是

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

做

this.collection.each(function (wineModel) 

【参考方案2】：

你应该改变

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

        );

到

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

        );

【参考方案3】：

欢迎来到 SO :) 这是你的第一个任务，所以让我让它令人难忘。当您说集合是undefined 时，您可以向我们提供行号（或突出显示它），以便调试。在initialize 方法中，如果您想引用您想要的对象（默认为window 对象）而不是在下面做#1

，则必须将_.bindAll(this)

 _.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);

也试试这个

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

以防万一您在这里迷路了，请复制代码http://jsbin.com/axixir/edit#javascript

【讨论】：

感谢您的帮助。我在第 37 行收到 this.model.each is not a function。在第 67 行也收到 this.wineList is undefined

@SebastianLucaciu 抱歉不是每个都是forEach

_.each(list, iterator, [context]) Alias: forEach ，所以我认为 _.each 应该可以工作。问题是 this.model.models 未定义