Javascript 主干视图el为表列

有没有人成功地使用Backbone.js将垂直表列用作视图“el”？因为表是基于行的，所以使用表行作为与视图关联的DOM容器是很简单的。但是，我需要实现的布局是垂直的，因此表列将是我设计的“el”，但表列没有类似的容器元素，因为表布局是水平的

---

到目前为止，我还无法成功地为表列创建子视图，这意味着我正在将数据绑定到DOM以检索和操作表列。我的设计变得更加复杂，这使我重新评估了最初的方法，希望有更好的方法通过子视图管理这个场景。有什么想法吗？

我想不出一个简单的办法来解决你的问题。将多个视图作为

el

共享

元素听起来像是一场潜在的噩梦

从另一个角度来解决这个问题，用浮动的

元素构造一个表列，并将视图绑定到这些元素，而不是使用HTML表，怎么样？比如：

<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>

一个工作样本。这个解决方案当然远不是完美的，因为如果您的内容大小可变，那么您必须自己实现行大小调整。但是，如果需要通过主干视图呈现表，从JS的角度来看，这可能是最简单的方法

编辑：事实上，我想到了一个更好、更不脆弱的解决方案，那就是使用table

元素作为列，只需将行实现为

s，而无需任何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>

第1列
福
酒吧
巴兹
库克斯
第2列
福
酒吧
巴兹
库克斯

---

.

你可以利用以下事实

• jQuery对象是DOM元素的列表
• 主干不需要唯一的DOM节点（至少据我所知）

• this.$el

  视图中的节点可以是您想要的任何节点

考虑到这一点，您可以一次渲染表（请参见，渲染速度更快，在您的情况下可能更容易），然后在与模型关联的表单元格上应用子视图。我选择了一个类名，但是每行第n个元素上的选择器应该可以工作

模板

---

正如您在本演示中所看到的，每一列都由一个专用视图处理。

您实际上是在显示表格数据，还是在使用表格进行布局？如果后者——不要。如果您的数据以符合垂直列格式的特定格式返回，则这是可能的。显然，tbody将是您的上下文，重复列是其中的元素。您的数据必须采用多数组格式。例如，[[{'First column First row'，'First column second'}]，{4567'，second column First row'，'second column second row'}]]。对于每一列，循环遍历每个数组，直到到达列的末尾。这是真正的表格数据-这是一个产品比较屏幕，每一列都是产品，每一行都是产品的特定属性。我没有能力修改设计。我们需要能够实时地从表中添加或删除产品，主干网非常适合这种情况，正是垂直布局扼杀了它。哇，这是一种相当优雅的方式，可以将“el”管理为一个元素集合，而不是单个元素-我肯定想到了这一点，但我认为它不起作用。我想我想用类似于这个解决方案的东西。

<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>

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