Question

我正在关注CodeSchool的“Backbone.js解剖”，但无法在我的机器上运行。有类似的问题，但是他们还有很多额外的东西，对于像我这样全新的人来说，它很难学习。

这里的代码尽可能简单/通用：

var WorldEvent = Backbone.Model.extend({});
var WorldEventView = Backbone.View.extend({
    events: {
        'click' : 'focusEvent'
    },

    focusEvent: function(){
        alert('great.');
    },

    className : 'pin bounce',

    render : function () {
        console.log('did something');
        this.$el.html("rendered");
        return this;
    }
});

var WorldEventCollection = Backbone.Collection.extend({ 
    model: WorldEvent,
    url: '/events'
});

var worldEventCollection = new WorldEventCollection();

var worldEventCollectionView = new WorldEventView({

    collection: worldEventCollection,

    initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },
    addOne: function(myEvent){
        var worldEventView = new WorldEventView({ model: myEvent });
        this.$el.append(worldEventView.render().el);
    },
    addAll: function(){
        this.collection.forEach(this.addOne, this);
    },
    render: function(){
        this.addAll();
    }
});

好消息是，如果我致电

worldEventCollection.add(new WorldEvent( {<my data>} ));

...新模型已添加到worldEventCollection中 - 我已记录worldEventCollection和worldEventCollection.length进行验证。

坏消息是“做了一些事情”没有出现在控制台中，我看不到渲染的证据。

请帮忙，我浪费了大量的时间，这可能是超级简单的。谢谢。

更新

好的，我发现了一个问题。我需要完全定义一个单独的WorldEventCollectionView类，所以这不正确：

var worldEventCollectionView = new WorldEventView({

    collection: worldEventCollection,

...

相反，我认为一种正确的方法是：

var WorldEventCollectionView = Backbone.View.extend({
  initialize: function(){
    this.collection.on('add', this.addOne, this.collection);
...

然后：

var worldEventCollectionView = new WorldEventCollectionView({ collection: worldEventCollection });

Answer 1

WorldEventView.render必须按照主干视图惯例以return this;结尾，否则worldEventView.render().el之类的链接将无效。具体来说，这将引发异常，因为render()返回undefined并且您尝试访问.el的{{1}}属性。

还有其他一些关于你的代码片段不太正确的事情，但先修复它，看看你是否可以从那里拿走它。通常在视图的undefined方法中，您希望在render末尾的视图this.$el和return this;中填充HTML，这就是您应该做的所有事情。渲染有一个非常特定的目的和代码，不遵循那个基本思想和语义属于别处。

哦，所以这个：

render

应该是：

var worldEventCollectionView = new WorldEventView({

Backbone的Backbone.js。（'add'）不会导致渲染

1 个答案: