backbone.js无法呈现视图

Question

下面我有我的一个模块的代码.这是一种spagetti-ish代码,但我想要完成的只是拥有一个模型,一个集合,并渲染一个视图(使用下划线模板)将数据从集合连接到视图.我悲惨地失败了.我得到的问题是尝试在那里运行最后一次调用testfeed.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的视图成为"类",您必须先创建一个新实例,new然后再渲染它:

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

你也在"课堂"里面这样做:

collection : newFeedCollection

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

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

该视图构造函数将自动设置视图的this.collection给你建立视图时,通过集合.

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

newFeedCollection.fetch();

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

1. 您的视图render应该能够处理空集合.这主要取决于您的模板足够智能,以便在集合为空时合理.

2. 在视图中绑定render到集合的"reset"事件initialize:

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

您将遇到的另一个问题是您的视图render正在尝试渲染this.model:

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

当您的视图基于集合时; 你想改变它:

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

您需要tags在那里,以便模板在查看集合数据时具有要引用的名称.

此外,你应该能够取代这个:

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

就这样:

thisCollection.add(data.data);

没有必要逐个添加它们Collection#add,对一系列模型非常满意.

这是一个演示(希望)所有内容都整理出来:

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

我不得不假装fetch内部,但其他一切都应该在那里.