javascript - backbone.js 无法呈现 View

Question

下面是我的一个模块的代码。这是一种类似意大利面条的代码，但我想要完成的只是拥有一个模型、一个集合并呈现一个 View (使用下划线模板)将集合中的数据连接到 View 。我失败得很惨。我遇到的问题是，尝试在那里运行对 testfeed.render() 的最后一次调用告诉我 render 不是函数，但它已明确定义。我能够获取该数据并将其似乎添加到来自 api 的集合中。我在这里做错了什么？

 // Create a new module.
  var Tagfeed = app.module();

  // Default model.
  Tagfeed.Model = Backbone.Model.extend({
    defaults : {
        name : '',
        image : ''
    },
    initialize : function(){
        console.log('tagfeed model is initialized');
        this.on("change", function(){
            console.log("An attribute has been changed");
        });
    }
  });

  var feedCollection = Backbone.Collection.extend({
    model: Tagfeed.Model,
    initialize : function () {
        console.log('feedcollection is initialized');
    },
    fetch: function () {
        var thisCollection = this;
        Api_get('/api/test', function(data){

            $.each(data.data, function(){
                thisCollection.add(this);
            });
            return thisCollection;
        })
    }
  });

  var test = new Tagfeed.Model({name:'test'});

  var newFeedCollection = new feedCollection();

  newFeedCollection.fetch();

  console.log(newFeedCollection.at(0));

  var testfeed = Backbone.View.extend({
    el: $('#main'),
    collection : newFeedCollection,
    render: function( event ){
        var compiled_template = _.template( $("#tag-template").html() );
        this.$el.html( compiled_template(this.model.toJSON()) );
        return this; //recommended as this enables calls to be chained.
    }
  });

  testfeed.render();

编辑 * 来自@mu 的更新代码是简短的建议

  // Create a new module.
  var Tagfeed = app.module();

  // Default model.
  var tagModel = Backbone.Model.extend({
    defaults : {
        name : '',
        image : '',
        pins : 0,
        repins : 0,
        impressions : 0
    },
    initialize : function(){
        console.log('tagfeed model is initialized');
        this.on("change", function(){
            console.log("An attribute has been changed");
        });
    }
  });

  var feedCollection = Backbone.Collection.extend({
    model: tagModel,
    initialize : function () {
        console.log('feedcollection is initialized');
    },
    fetch: function () {
        var thisCollection = this;

        Api_get('/reporting/adlift/pin_details', function(data){

            thisCollection.add(data.data);

            return data.data;
        })
    }
  });

  var test = new tagModel({name:'test'});

  var newFeedCollection = new feedCollection();

  newFeedCollection.fetch();

  console.log(newFeedCollection.at(0));

  var TestFeed = Backbone.View.extend({
    el: $('#main'),
    render: function( event ){
        console.log('here');
        var compiled_template = _.template( $("#tag-template").html(), this.collection.toJSON());
        this.el.html( compiled_template );
        return this; //recommended as this enables calls to be chained.
    },
    initialize: function() {
        console.log('initialize view');
        this.collection.on('reset', this.render, this);
    }
  });

  //Tagfeed.testfeed.prototype.render();

  var testfeed = new TestFeed({ collection: newFeedCollection });

  testfeed.render();

现在，当我运行 testfeed.render() 时，我没有看到任何错误，也没有在渲染函数中看到 console.log。想法？

Answer 1

你的问题就在这里:

var testfeed = Backbone.View.extend({ /*...*/ });
testfeed.render();

这使您的 testfeed 成为 View “类”，您必须在呈现它之前使用 new 创建一个新实例:

var TestFeed = Backbone.View.extend({ /*...*/ });
var testfeed = new TestFeed();
testfeed.render();

您也在“类”中执行此操作:

collection : newFeedCollection

这会将 newFeedCollection 附加到该 View 的每个实例，这可能会导致一些令人惊讶的行为。将集合放入 View 的常用方法是将其传递给构造函数:

var TestFeed = Backbone.View.extend({ /* As usual but not collection in here... */ });
var testfeed = new TestFeed({ collection: newFeedCollection });
testfeed.render();

view constructor会自动将 View 的 this.collection 设置为您在构建 View 时传递的集合。

另一件需要考虑的事情是:

newFeedCollection.fetch();

通常是 AJAX 调用，因此当您尝试呈现它时，您的集合中可能没有任何内容。我会做两件事来解决这个问题:

1. 您的 View 的render 应该能够处理空集合。这主要取决于您的模板是否足够智能，能够在集合为空时做出判断。

2. 在 View 的 initialize 中将 render 绑定(bind)到集合的 "reset" 事件:

   initialize: function() {
       this.collection.on('reset', this.render, this);
   }
   

您将遇到的另一个问题是您的 View 的render 正在尝试呈现this.model:

this.$el.html( compiled_template(this.model.toJSON()) );

当您的 View 基于集合时；你想把它改成:

this.$el.html(compiled_template({ tags: this.collection.toJSON() }));

您需要在其中添加标签，以便在查看集合数据时模板具有可引用的名称。

此外，您应该能够替换它:

$.each(data.data, function(){
    thisCollection.add(this);
});

就这样:

thisCollection.add(data.data);

不用一一添加，Collection#add对一系列模型非常满意。

这是一个(希望)一切都已解决的演示:

http://jsfiddle.net/ambiguous/WXddy/

我不得不伪造 fetch 内部，但其他一切都应该在那里。