0

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

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

$(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();

})
4

1 回答 1

2

模型用于存储和管理单个数据块。在您的情况下，这将是一个名称/href 对。通常，您使用Backbone.Model.extend所有特定于模型的方法和属性来创建模型“类”，然后使用该模型“类”创建该模型的实例new或将该模型“类”设置为集合的model属性，以便该集合可以创建模型的新实例.

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

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

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

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

现在您可以创建集合的一个实例并将模型的数据数组传递给它：

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'  }
]);

您通常会将集合传递给视图，而不是让视图实例化集合；如果您这么说， Backbone 将自动设置，您可以：this.collectionnew SomeView({ collection: some_collection })

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

并通过视图中的其他位置说出new View({ collection: links })和访问该集合。this.collection

集合是几个模型的集合（有点像数组），它将混合各种有用的下划线方法，因此您可以像这样遍历集合：

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来访问模型属性，模型属性和对象属性是不同的东西。您还可以使用toJSON一次展平所有数据。在回调内部创建视图的最后一个this参数。Backbone 已经在视图的方法中提供了一个别名，所以我也切换到它。eachthisthis.$el.find()this.$()

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

于 2012-12-16T17:58:34.960 回答