Question

继承我的代码：

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);
  }

});

继承我的问题：

对不起这个菜鸟问题！我正在学习Backbone并遇到一些问题。我看过一堆教程/指南，但我觉得自己很困惑。

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

将我的收藏品传递给RowsSubView后，我被困住了。我不确定如何渲染模板中的每个对象。然后插入那些。

PS：我能够在this.collection中记录RowsSubView并查看包含项目数组的对象。

感谢。

Answer 1

好吧，从这开始吧。看起来需要完成相当多的清理工作=）

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更改为

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

Answer 2

对于那些可能会有所帮助的人，接下来是我最终的结果：

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;
});

使用模板渲染每一行 - Backbone

2 个答案: