Backbone.js 收集抛出错误

我（作为初学者）正在制作一个小型骨干函数来附加我的链接，为此我使用要分配模型的集合，

但集合抛出错误..任何人都可以纠正我的代码吗？

$(function(){
    var Model = new Backbone.Model({
        data:[
                {name:'Yahoo',href:'http://www.yahoo.com'},
                {name:'Gmail',href:'http://www.gmail.com'},
                {name:'Bing',href:'http://www.bing.com'}
              ]    
    });

    var Collection = new Backbone.Collection.extend({
        model:Model // is this not correct way to do?
    });

    var View = Backbone.View.extend({
        el:'#container',
        events:{
            'click button':'render'
            },
        initialize:function(){
            this.collection = new Collection(); //throw the error!
            this.template = $('#temp').children();
        },
        render:function(){
            var data = this.collection.get('data');
            for(i=0;i<data.length;i++){
                var li = this.template.clone().find('a')
                .attr('href',data[i].href)
                .text(data[i].name).end();
                this.$el.find('ul').append(li);
            }
        }
    });

    var myLink = new View();

})

模型用于存储和管理各个数据块。在您的情况下，这将是单个名称/目录对。通常你使用Backbone.Model.extend使用所有特定于模型的方法和属性创建模型“类”，然后使用以下命令创建该模型的实例new或将该模型“类”设置为集合的model财产 http://backbonejs.org/#Collection-model以便集合可以创建模型的新实例。

你的模型应该看起来更像这样：

var Model = Backbone.Model.extend({
    defaults: {
        name: '',
        href: ''
    }
});

请注意，没有new在那里，我们只是创建一个“类”来作为模型实例的基础。然后我们将模型连接到一个集合（再次使用extend没有new):

var Collection = Backbone.Collection.extend({
    model: Model
});

现在你可以创建集合的实例 http://backbonejs.org/#Collection-constructor并将模型的数据数组交给它：

var links = new Collection([
    { name: 'Yahoo', href: 'http://www.yahoo.com' },
    { name: 'Gmail', href: 'http://www.gmail.com' },
    { name: 'Bing',  href: 'http://www.bing.com'  }
]);

您通常会将集合传递给视图，而不是让视图实例化集合；骨干网会自动 http://backbonejs.org/#View-constructor set this.collection如果你说new SomeView({ collection: some_collection })所以你可以：

var View = Backbone.View.extend({
    //...
    initialize: function() {
        this.template = $('#temp').children();
    },

and say new View({ collection: links })并通过访问集合this.collection视图中的其他地方。

集合是多个模型的集合（有点像数组），并且它将具有混合了各种有用的下划线方法 http://backbonejs.org/#Collection-Underscore-Methods所以你可以像这样迭代集合：

render: function() {
    this.collection.each(function(link) {
        var li = this.template.clone().find('a').attr('href', link.get('href')).text(link.get('name'));
        this.$('ul').append(li);
    }, this);
}

还要注意使用get http://backbonejs.org/#Model-get访问模型属性，模型属性和对象属性是不同的东西。您还可以使用toJSON http://backbonejs.org/#Model-toJSON一次展平所有数据。决赛this论证each http://underscorejs.org/#each makes this在回调视图中。主干网已经提供了this.$el.find()视图中的别名this.$() http://backbonejs.org/#View-dollar方法，所以我也切换到该方法。

这是一个简化的演示：http://jsfiddle.net/ambigously/WSqLM/ http://jsfiddle.net/ambiguous/WSqLM/