避免在 Backbone.Marionette 中使用 DIV 汤答案

【问题标题】：Avoiding DIV Soup in Backbone.Marionette避免在 Backbone.Marionette 中使用 DIV 汤
【发布时间】：2013-12-11 14:36:48
【问题描述】：

我有点问题。我的表格数据是这样的，你有一个表格，分成列组，然后分成列。为了争论，让我们这样说：

<person>
    <details>
        <age>26</age>
        <birthplace>Amsterdam</birthplace>
    </details>
    <appearance>
        <hair>Brown</hair>
        <eyes>Grey</eyes>
    </appearance>
    <clothes>
        <trousers>Black</trousers>
        <shirt>Red</shirt>
    </clothes>
</person>

据此，我的想法是这些群体可以/应该这样表示：

+-------------------------------------------------------+
| Layout                                                |
| +---------------+ +---------------+ +---------------+ |
| | Composite     | | Composite     | | Composite     | |
| | +----+ +----+ | | +----+ +----+ | | +----+ +----+ | |
| | |Item| |Item| | | |Item| |Item| | | |Item| |Item| | |
| | +----+ +----+ | | +----+ +----+ | | +----+ +----+ | |
| +---------------+ +---------------+ +---------------+ |
+-------------------------------------------------------+

因为表格组应该能够独立地隐藏在视图中，或者对它们执行其他操作（作为一个组）。

但是，这是表格数据，因此在语义上应该像这样显示（带有适当的 table 和 tbody 标签）：

<table>
    <colgroup>
        <col>...</col>
        ...
    </colgroup>
    <thead>
        <tr>
            <th>Age</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>26</td>
            <td>Amsterdam</td>
            <td>Brown</td>
            <td>Grey</td>
            <td>Black</td>
            <td>Red</td>
        </tr>
        ...
    </tbody>
</table>

关于如何实现这一点的任何想法？我想（可能是错误的）我将不得不以某种方式扩展/破解 Marionette 以使其产生所需的输出 - 我只是不知道这可能会发生什么！或者实际上，如果我的大脑开始思考错误的东西...... :)

【问题讨论】：

你有一些代码要显示吗？
嗨 Juliano - 不，我没有任何代码，我只是想说明问题所在，并且想知道（基本上）如何制作 3 个分层视图（祖父母、父母、 child) 在 Marionette 中显示为 2 个 HTML 元素 ...

标签： html dom backbone.js marionette

【解决方案1】：

如果我正确理解您的问题，您应该能够使用一种布局来显示 3 个复合视图。

要避免复合视图中出现“div 汤”，只需使用 tagName 属性即可。您可以在此处查看示例：

【讨论】：

嗨，谢谢你的回复。嗯，这就是我的意思——但是每个复合视图应该有 2 个项目视图（在这种情况下）。所以一个布局，它包含 3 个复合视图，而复合视图又包含 2 个项目视图。但是，其中之一（复合视图）应该 not 有一个 tagName，因为 HTML 应该由一个元素（布局表示）和一个元素（ItemView代表) ... Composite 视图纯粹是为了代表组，它们应该具有共享的行为，但不能在保持 HTML 规范的同时分组在一起。
^^ 这有意义吗？解释起来有点棘手:)
如果没有您想要的 HTML 结果的具体示例，很难理解。但是 Backbone（以及扩展的 Marionette）视图总是有一个元素包裹它们。要么提供tagName 的类型，要么默认使用 div。如果这不起作用，您需要重新构建视图...
谢谢，接受您的回答，因为它是正确的，即使它不是我想听到的 ;)。我在上面给出了数据（以 XML 格式）、木偶视图（图表）和预期 HTML 的示例——但无论如何，这已经回答了这个问题。困难的一点是重构这些视图，因为它们应该以某种方式真正组合在一起（参见 XML），但是元素的性质不允许它发生。也许是时候加入 W3C/WHATWG 了：P

是的，我看到了这些，但仍然不知道实际的 HTML 结构是什么样的。也许您可以将 div 用于显示属性设置为 inline-block 的组？

【解决方案3】：

这是附注 -

如果您想将 height: 100% 添加到包装 div 中，以便子元素中的 % height 值可以工作。

更改backbone.marionette.js下
Marionette.ItemView= Marionette.ItemView.extend({ ...和
Marionette.CompositeView= Marionette.CollectionView.extend({ ...下的渲染函数，如下：

render: function() {
  .......

  // ADD THIS BEFORE THE RETURN STATEMENT
  $(this.el).css("height", "100%");

  return this;
},

【讨论】：

所问的问题不是关于如何设置元素的样式，而是如何避免“div 汤”，这个答案没有解决这个问题。充其量，这样的切线评论属于评论。诸如答案之类的切题使得找到真正回答问题的答案变得更加困难。如果你的旁边没问题，那为什么不下一个，下一个，下一个？我处理过的问题有超过 30 个答案，其中三分之一是我必须阅读的旁白，才发现它们无助于解决所提出的问题。