Question

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

<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>
    <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以使其产生所需的输出 - 我只是不知道可能会发生什么！或者确实，如果我的大脑开始考虑错误的东西......：）

Answer 1

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

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

Answer 2

我已经在这个网站上找到了解决这个问题的方法 - 请参阅Turning off div wrap for Backbone.Marionette.ItemView（适用于集合视图，因为对我来说它更符合逻辑）。但是，IMO这种解决方案只应在特殊情况下使用;一般来说Backbone / Marionette处理视图的方式是非常明智的，并且应该编写大体上的标记以适应它而不是相反的方式！：）

Answer 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;
},

避免在Backbone.Marionette中使用DIV汤

3 个答案: