Question

我正在将标准网络应用程序迁移到骨干网，今天是第一天，所以假设我已经犯了一些非常初学者的错误。我有以下View类，它采用了一个集合。我正在迭代它，它返回它所谓的基于console.log'ging（注释为“这工作正常”）但它没有附加任何东西（注释为“这不起作用”）。谁能告诉我这个片段我做错了什么？

var HomepagePositionsView = Backbone.View.extend({
    render:function(){
       var str="";
       this.collection.forEach(function(location){
         var hpsView=new HomepagePositionView({model:location});
         //hpView.render();
         console.log(hpsView.render().el); // this works ok
         //str+=hpView.el;
         $(this.el).append(hpsView.render().el);  // this doesn't work

       });
       //$(this.el).text(str);
       console.log(this.el); // just <div></div>
       return this;
    }
  });

thx任何帮助

编辑＃1

这就是我实例化的方式：

homepage_position: function(){
  console.log("within homepage_position");
  this.homepage_positions= new Locations();
  this.homepage_positions.url='/hex-jt/api-homepage-position';
  var str="";
  this.homepage_positions.fetch({success: function(data){
    var hpView= new HomepagePositionsView({ collection:data});
    hpView.render();
    console.log(hpView.el);
    //str+= $.html(hpView.el);
    $('#app').html(hpView.el);
  }});

Answer 1

您能否显示初始化新视图的位置，即：

new HomepagePositionsView({...})

我的猜测是你没有提供附加的el，所以发生的事情是你正确地在你的视图中创建了html但你没有指定一个DOM元素来附加它。要清楚它应该看起来像这样：

new HomepagePositionsView({collection: myCollection, el: $('#someElToAttachTo')})

你应该使用这个。$ el而不是$（this.el），因为这个。$ el是一个缓存的jQuery对象。此外，如果您的Backbone库是最新的，您可以

this.collection.each(function(){...})

将委托给underscore.js，而后者依赖于浏览器代表最快的选项。最后，如果您打算使用Backbone进行任何认真的工作，我会考虑查看Marionette.js，因为它为构建大型js应用程序提供了许多不错的功能。

Answer 2

当您在集合中进行迭代时，此不再引用您用于引用el的视图对象。尝试在循环外部缓存此项，将其指定给self，然后在从渲染的子视图中追加el时从自己引用el。

var self = this;

this.collection.forEach(function () {
    $(self.el).append(...)
});

骨干和遍历集合，但结果没有附加到$（this.el）

2 个答案: