骨干视图el作为表列

有没有人有任何成功使用Backbone.js垂直表列作为视图'el'？由于表格是基于行的，因此使用表格行作为与视图关联的DOM容器是微不足道的。然而，我需要实现的布局是垂直的，因此表格列将是我设计的'el'，但表格列没有类似的容器元素，因为表格布局是水平的。骨干视图el作为表列

到目前为止，我还没有能够成功地为表列创建子视图，这意味着我绑定数据到我的DOM以检索和操纵表列。我的设计变得复杂得多，这导致我重新评估原始方法，希望有更好的方法通过子视图来管理这种情况。有任何想法吗？

来源

2013-01-21 user1998321

您实际上是在呈现表格数据还是使用表格进行布局？如果后者 - 不。 http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – jevakallio

如果您的数据以特定格式返回，并且符合垂直列格式，则可能会发生这种情况。显然，tbody将成为你的上下文，重复的列是其中的元素。 –

您的数据必须采用多种阵列格式。例如，[[{'第一列第一行'，'第一列第二'}]，[{4567，'第二列第一列'，'第二列第二列'}]]。对于每一列，您循环遍历每个数组，直到到达列的末尾。 –

你可以采取的事实，即

的jQuery对象的DOM元素
骨干的名单并不需要一个唯一的DOM节点（至少据我可以告诉）
this.$el在视图中就可以成为你想

考虑到这一点无论节点，可以使您的表中的一个去（见BackboneJS Rendering Problems，它的速度更快，并在你的c ase可能更容易），然后将您的子视图应用于与模型关联的表格单元格。我选择了一个类名作为选择，但每行的第n个元素上的选择器应该可以工作。

模板

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <% _(children).each(function(model) { %> 
       <th><%= model.id %></th>     
      <% }); %> 
     </tr> 
    </thead> 
    <tbody> 
    <% _(properties).each(function(prop) { %> 
     <tr> 
      <td><%= prop %></td> 
      <% _(children).each(function(model) { %> 
       <td class="<%= model.cid %>"><% print(model[prop]); %></td> 
      <% }); %> 
     </tr> 
    <% }); %> 
    </tbody> 
</table>

查看

ListView = Backbone.View.extend({ 
    initialize: function(opts) { 
     this.options = opts; 
    }, 
    render: function() { 
     var data, html, $table, template = this.options.template; 

     data = this.collection.map(function (model) { 
      return _.extend(model.toJSON(), { 
       cid: model.cid 
      }); 
     }); 

     html = this.options.template({ 
      children: data, 
      properties: ['id', 'name'] 
     }); 

     $table = $(html); 

     this.collection.each(function (model, ix) { 
      var $el = $table.find("." + model.cid), 
       subview = new ItemView({ 
        el: $el, 
        model: model 
       }); 
     }); 

     this.$el.empty(); 
     this.$el.append($table); 

     return this; 
    } 
});

正如您在本演示http://jsfiddle.net/nikoshr/psasT/12/检查，每列由专用视图处理。

来源

2013-01-22 17:25:13 nikoshr

哇，这是一种相当优雅的方式来管理一个'el'作为元素集合而不是单个元素 - 我明确想到了这一点，但我认为它不会奏效。我想我想用类似这个解决方案的东西去。 – user1998321

我想不出一个简单的解决方案来解决您的问题。有多个视图共享<table>元素，因为el听起来像是一个潜在的噩梦。

如何从不同角度攻击问题，而不是使用HTML表格，从浮动的<div>元素构建表列，并将视图绑定到这些元素？喜欢的东西：

<div class="faux-table"> 
    <div class="faux-column"> 
    <div class="faux-header">Col 1</div> 
    <div>Foo</div> 
    <div>Bar</div> 
    <div>Baz</div> 
    <div>Qux</div> 
    </div> 
    <div class="faux-column"> 
    <div class="faux-header">Col 2</div> 
    <div>Foo</div> 
    <div>Bar</div> 
    <div>Baz</div> 
    <div>Qux</div> 
    </div> 
</div>

而且一个CSS规则：

.faux-table > div.faux-column { 
    float:left; 
}

在this fiddle工作示例。这个解决方案当然是远远不够完美的，因为如果你有不同大小的内容，你必须实现自己的行大小。但是，如果您需要获取由Backbone视图呈现的表格，这可能是从JS角度来看最简单的方法。

编辑：事实上，它发生在我，一个更好的，少脆弱的解决方案是使用表<td>元素列，只是执行行作为<div>•不用任何CSS浮动黑客：

<table> 
    <tr> 
     <td class="faux-column"> 
      <div class="faux-header">Col 1</div> 
      <div>Foo</div> 
      <div>Bar</div> 
      <div>Baz</div> 
      <div>Qux</div> 
     </td> 
     <td class="faux-column"> 
      <div class="faux-header">Col 2</div> 
      <div>Foo</div> 
      <div>Bar</div> 
      <div>Baz</div> 
      <div>Qux</div> 
     </td> 
    </tr> 
</table>

Revised version in this fiddle。

来源

2013-01-22 16:51:27 jevakallio

骨干视图el作为表列

回答

相关问题