2

下面我有我的一个模块的代码。这是一种意大利面条式的代码，但我想要完成的只是拥有一个模型、一个集合，并渲染一个视图（使用下划线模板），将集合中的数据连接到视图。我失败得很惨。我遇到的问题是，尝试在那里运行最后一次调用 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。想法？

4

2 回答 2

8

你的问题就在这里：

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

于 2012-09-13T21:04:16.717 回答
1

testfeed不是一个实例——它是一个构造函数。

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

可能会起作用（您el在视图定义期间定义的内容 - 使其成为原型属性，IIRC）。

于 2012-09-13T20:59:51.573 回答