Question

我有一个相当简单的主干视图，通过_.each函数迭代集合中的每个项目时呈现标记。

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

我也有收藏的视图

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>

我希望做的是将一定数量的项目包装在表格行中，或<tr></tr>。获得一个单元格/行很容易。我试图获得每行2或3个或多个单元格。我已经尝试了Jquery包装功能，我猜我需要某种模块化部门，但我有点卡住了。我也是Backbone的新手，这是另一个障碍。

要澄清 - 集合中的单个项目应位于每个<td>中，并且我正在尝试放置＆gt;每行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

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

基本上，您不应手动将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创建具有多个单元格的行

3 个答案: