通过 backbone.js 创建包含多个单元格的行

Question

我有一个相当简单的 backbone 视图，它在通过 _.each 函数遍历 collection 中的每个项目时呈现一个标签。

var SingleView = Backbone.View.extend({
  tagName:td,
  //other stuff
});

我对 collection 也有看法

var CollectionView = Backbone.View.extend({
//other stuff
this.collection.each(function(model ,i) {
var item = new SingleView({model: model});
 //alert(i);
//maybe in here is where I need logic to wrap a row around a <td> tag ?
 $('.collection').append(item.render().$el);

});

然后在模板中：

<table class = "collection">
<!-- variables to render as html -->
</table>

我希望做的是将给定数量的项目包装在 table 行或 <tr></tr> 中。很容易得到一个cell/row。我正在尝试每行获得 2 个或 3 个或任意多个单元格。我试过 Jquery 换行功能，我猜我需要某种模块化划分，但我有点卡住了。我也是 Backbone 的新手，这是另一个障碍。

澄清一下 - collection 中的单个项目应该在每个 <td> 中，我试图在每一行中放置 > 1 <td>。

Answer 1

是这样的吗？

http://jsfiddle.net/9mjcmgpo/

var SingleView = Backbone.View.extend({
  tagName: 'tr',
  template: _.template('<td><%=name%></td><td><%=age%></td><td><%=sex%></td>'),
  render: function() {
      this.$el.append(this.template(this.model.toJSON()))
      return this
  }
});

var CollectionView = Backbone.View.extend({
      template: _.template('<tr><th>name</th><th>age</th><th>sex</th></tr>'),
    initialize: function() {
        this.$el = $('.collection');
        this.el = this.$el[0];

        // sudo collection
        this.collection = new Backbone.Collection();
        this.collection.add({'name': 'test1', 'sex': 'f', age: 21});
        this.collection.add({'name': 'test2', 'sex': 'o', age: 25});
        this.collection.add({'name': 'test3', 'sex': 'm', age: 26});

        // hack
        this.render();
    },
    render: function() {
        this.$el.html(this.template());
        this.collection.each(_.bind(function(model) {
            var item = new SingleView({model: model});
            this.$el.append(item.render().$el);
        }, this));
        return this;
    }
});

new CollectionView()

Answer 2

我试图创建一个尽可能接近您的解释的工作示例。它将集合呈现为 table 个单元格，我想你可以从那里开始。

基本上，您不应该手动将 td 包装在 tr 标签中。根据您的数据流，分别创建 TrView 和 TdView 的实例。将 tr 附加到 table，将 td 附加到 tr。

您可能还想看看 Marionette 中实现的 CollectionView： http://marionettejs.com/docs/v2.4.3/marionette.collectionview.html

示例 #1：

var collection = new Backbone.Collection([
  { title: 'Item 1' },
  { title: 'Item 2' },
  { title: 'Item 3' }
]);

var TableView = Backbone.View.extend({
  tagName: "table",
  className: "collection",
  render: function(){
    var rowView = new RowView({ collection: collection });
    this.$el.html( rowView.render().el );
    return this;
  }
});

var RowView = Backbone.View.extend({
  tagName: "tr",
  render: function(){
    this.collection.each(this.appendItem, this);
    return this;
  },
  appendItem: function(model){
    var tdView = new TdView({ model:model });
    this.$el.append( tdView.render().el );
  }
});

var TdView = Backbone.View.extend({
  tagName: "td",
  render: function(){
    this.$el.text( this.model.get('title') );
    return this;
  }
});

var tableView = new TableView();
tableView.render().$el.appendTo(document.body);

table {
  border: 1px solid steelblue;
}
td {
  border: 1px solid brown;
  padding: 3px 5px;
}

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

示例 #2：

var collection = new Backbone.Collection([
  { title: 'Item 1' },
  { title: 'Item 2' },
  { title: 'Item 3' },
  { title: 'Item 4' },
  { title: 'Item 5' },
  { title: 'Item 6' }
]);

var TableView = Backbone.View.extend({
  tagName: "table",
  className: "collection",
  initialize: function(o){
    this.maxItemsInRow = o.maxItemsInRow? o.maxItemsInRow: 3;
  },
  render: function(){
    this.collection.each(this.addItem, this);
    return this;
  },
  addRow: function(){
    var rowView = new RowView({ collection: collection });
    rowView.$el.appendTo( this.el );
    this.currentRow = rowView;
    this.currentRowItemsLength = 0;
  },
  addItem: function(model){
    if( typeof this.currentRow === 'undefined') {
      this.addRow();
    }
    this.currentRow.addItem(model);
    this.currentRowItemsLength++;
    if(this.currentRowItemsLength >= this.maxItemsInRow){
      this.currentRow = undefined;
    }
  }
});

var RowView = Backbone.View.extend({
  tagName: "tr",
  addItem: function(model){
    var tdView = new TdView({ model:model });
    this.$el.append( tdView.render().el );
  }
});

var TdView = Backbone.View.extend({
  tagName: "td",
  render: function(){
    this.$el.text( this.model.get('title') );
    return this;
  }
});

var tableView = new TableView({ collection: collection, maxItemsInRow: 3 });
tableView.render().$el.appendTo(document.body);

table {
  border: 1px solid steelblue;
}
td {
  border: 1px solid brown;
  padding: 3px 5px;
}

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

Answer 3

您可以执行如下操作。我已将 3 硬编码为行数。如有必要，您可以通过将其传递给视图来使用变量号。

var collection = new Backbone.Collection([{
  title: 'Item 1'
}, {
  title: 'Item 2'
}, {
  title: 'Item 3'
}, {
  title: 'Item 4'
}, {
  title: 'Item 5'
}]);

var TdView = Backbone.View.extend({
  tagName: "td",
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.text(this.model.get('title'));
    return this;
  }
});

var TableView = Backbone.View.extend({
  tagName: "table",
  className: "collection",
  initialize: function() {
    this.render();
  },
  render: function() {
    var $tr = $('<tr/>');
    var count = 1;
    this.collection.each(function(model, i) {
      if ((i / 3) >= count) { // end of current row
        this.$el.append($tr); //append current row
        $tr = $('<tr/>'); // create new row
        count = this.$el.find('tr').length + 1; // refresh counter
      }
      $tr.append(new TdView({ // append td to current row
        model: model
      }).el);
    }, this);
    this.$el.append($tr); // append final row 
    return this;
  }
});


var tableView = new TableView({
  collection: collection
});
tableView.$el.appendTo('body');

table {
  border: 1px solid steelblue;
}
td {
  border: 1px solid brown;
  padding: 3px 5px;
}

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

通过 backbone.js 创建包含多个单元格的行

create row with multiple cells via backbone.js

backbone.js

underscore.js