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（）时，我没有看到任何错误，也没有在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();

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

要考虑的另一件事是：

newFeedCollection.fetch();

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

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

将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内部，但其他一切都应该在那里。

Answer 2

testfeed不是实例 - 它是构造函数。

var instance = new testfeed(); 
instance.render();

可能会有用（在View 定义期间定义el的内容 - 使其成为原型属性IIRC）。

backbone.js无法呈现视图

2 个答案: