Javascript 使用模板主干渲染每一行

这是我的密码：

var RowsSubView = Backbone.View.extend({

  initialize: function() {
    log.debug(this.collection);
  },

  render: function() {
    var html = RowView();
    this.setElement(html);
    return this;
  }

});


var View = BaseView.extend({

  id: 'wrapper',

  className: 'container-fluid',

  events: {
  },

  initialize: function() {
    _.bindAll(this, 'render');
    log.debug('Initialized Queue View');
    this.opportunities = new Opportunities();

    this.opportunities.on('add', function(model){
    });

    this.opportunities.fetch({
      success: function(response, options) {
      },
      error: function(response) {
      }
    });
  },

  render: function() {
    var template = QueueView();
    this.$el.html(template);
    this.renderRowsSubView();
    return this;
  },


  renderRowsSubView: function() {
    // render rows
    this.row = new RowsSubView({collection: this.opportunities});
    this.row.render();
    this.$el.find('tbody').append(this.row.el);
  }

});

我的问题是：

对不起，我的问题是noob！我正在学习脊梁骨和有点问题。我看了很多教程/指南，但我想我把自己弄糊涂了

我正在尝试创建一个项目列表，并在表中呈现它们。我想将每个项目传递到我的模板中，并在视图中显示出来

我把我的收藏品交给我的RowsView后卡住了。我不知道如何渲染模板中的每个对象。然后插入这些

PS：我可以在我的行视图中记录此.collection，并看到一个包含项数组的对象

---

谢谢。

好的，我们从这个开始。看起来有相当多的清理工作需要完成=

var RowsSubView = Backbone.View.extend({

  initialize: function() {
    log.debug(this.collection);
  },

  render: function() {
    //var html = RowView(); // Looks like you're already placing a tbody as the container
    //this.setElement(html);

    this.collection.forEach(function( model ){
      this.$el.append( RowView( model.toJSON() ) ); // Assuming RowView knows what to do with the model data
    });

    return this;
  }

});

然后将renderRowsSubView更改为

---

对于那些可能有所帮助的人，以下是我的结论：

var RowsSubView = Backbone.View.extend({

  initialize: function() {
  },

  render: function() {
    var html = RowView({
      opp: this.model.toJSON()
    });
    this.setElement(html);
    return this;
  }

});


var View = BaseView.extend({

  id: 'wrapper',

  className: 'container-fluid',

  events: {
  },

  initialize: function() {
    _.bindAll(this, 'render', 'add');
    log.debug('Initialized Queue View');

    this.opportunities = new Opportunities();
    this.opportunities.on('add', this.add);

    this.fetch();
  },

  add: function(row) {
    this.row = new RowsSubView({model: row});
    this.row.render();
    $('tbody').append(this.row.el);
  },

  fetch: function() {
    this.opportunities.fetch({
      data: $.param({
        $expand: "Company"
      }),
      success: function(response, options) {
        // hide spinner
      },
      error: function(response) {
        // hide spinner
        // show error
      }
    });
  },

  render: function() {
    var template = QueueView();
    this.$el.html(template);
    return this;
  }


});

return View;
});

---

谢谢你的帮助。我把你的答案和我找到的其他东西结合起来了。

var RowsSubView = Backbone.View.extend({

  initialize: function() {
  },

  render: function() {
    var html = RowView({
      opp: this.model.toJSON()
    });
    this.setElement(html);
    return this;
  }

});


var View = BaseView.extend({

  id: 'wrapper',

  className: 'container-fluid',

  events: {
  },

  initialize: function() {
    _.bindAll(this, 'render', 'add');
    log.debug('Initialized Queue View');

    this.opportunities = new Opportunities();
    this.opportunities.on('add', this.add);

    this.fetch();
  },

  add: function(row) {
    this.row = new RowsSubView({model: row});
    this.row.render();
    $('tbody').append(this.row.el);
  },

  fetch: function() {
    this.opportunities.fetch({
      data: $.param({
        $expand: "Company"
      }),
      success: function(response, options) {
        // hide spinner
      },
      error: function(response) {
        // hide spinner
        // show error
      }
    });
  },

  render: function() {
    var template = QueueView();
    this.$el.html(template);
    return this;
  }


});

return View;
});