0

I've a bit of a problem. I've table data in such a way that you have a table, divided in to column groups, that's then divided in to columns. For the sake of argument, let's say like this:

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

From this, my thinking is that these groups could/should perhaps be represented like this:

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

Since the table groups should be able to be independently hidden from view, or have other actions performed on them (as a group).

However, this is tabular data and so, semantically, should be displayed like this (with appropriate table & tbody tags):

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

Any ideas on how to implement this? I guess (may be wrong) that I'll have to extend/hack about with Marionette somehow to get it to produce the desired output - I just haven't a clue what that might happen to be! Or indeed if my brain is thinking the wrong stuff to begin with ... :)

Algy Taylor
  • 814
  • 13
  • 29
  • Do you have some code to show? – Juliano Alves Dec 11 '13 at 15:47
  • Hi Juliano - no, I don't have any code, I was just meaning to show what the problem was, and wanted to know (basically) how to make 3 hierarchical views (grandparent,parent,child) appear as 2 HTML elements within Marionette ... – Algy Taylor Dec 13 '13 at 10:09

3 Answers3

2

If I'm understanding your question correctly, you should be able to use one layout to display 3 composite views.

To avoid "div soup" in your composite view, simply use the tagName property. You can see examples of that here:

David Sulc
  • 25,946
  • 3
  • 52
  • 54
  • Heya, thanks for the reply. Well, that's sort of what I mean - but then each composite view should have 2 item views (in this case). So a layout, which contains 3 composite views, which in turn contain 2 item views. BUT, one of these (the composite view) should *not* have a tagName, since the HTML should comprise of a element (which the Layout represents) and a element (which the ItemView represents) ... the Composite views are there purely to represent groups of s, which should have a shared behaviour, but cannot be grouped together as such whilst keeping within the HTML spec. – Algy Taylor Dec 13 '13 at 10:07
  • ^^ does that make sense? It's a bit of a tricky one to explain :) – Algy Taylor Dec 13 '13 at 10:08
  • 1
    It's hard to understand without a concrete example of the HTML result you want to have. But Backbone (and by extension, Marionette) views ALWAYS have an element wrapping them. Either your provide the type with `tagName`, or div will be used by default. If this doesn't work, you need to restructure your views... – David Sulc Dec 13 '13 at 10:43
  • Thanks, accepted your answer because it's right, even if it's not the one I wanted to hear ;). I'd given an example above of the data (in XML), marionette views (a diagram) and the intended HTML - but that's answered the question anyway. The difficult bit is going to be restructuring those views, because they should be grouped together in some way really (see the XML), but the nature of the element doesn't allow it to happen. Maybe it's time to campaign to the W3C/WHATWG :P
     – Algy Taylor Dec 13 '13 at 10:49
  • Yes I saw those, but still don't unsertand what the actual HTML structure would look like. Maybe you could use divs for the groups with a display property set to `inline-block` ? – David Sulc Dec 13 '13 at 14:43
0

I've found a solution to this problem on this very site - see Turning off div wrap for Backbone.Marionette.ItemView (adapted for a collectionView, since to me it makes more logical sense). However, IMO this solution should be only used in exceptional circumstances; generally the way Backbone/Marionette handle views is very sensible, and by and large markup should be written to fit in with that rather than the other way round! :)

Community
  • 1
  • 1
Algy Taylor
  • 814
  • 13
  • 29
-1

This is a side note -

If you want to add height: 100% to the wrapping div so that % height values in child elements would work.

Change the render function in backbone.marionette.js under
Marionette.ItemView= Marionette.ItemView.extend({ ... and
Marionette.CompositeView= Marionette.CollectionView.extend({ ... like so:

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

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

  return this;
},
vjjj
  • 1,019
  • 3
  • 10
  • 35
  • The question asked is not about how to style elements but how to avoid "div soup", which this answer does not address.. At best, a tangential remark like this belongs to a comment. Such tangential remarks as answers are making it that much harder to find an answer that *actually answers the question*. If your aside is okay, then why not the next, and the next, and the next? I've been on questions that have upwards of 30 answers, one third of which are asides that I have to read only to discover they don't help solving the problem asked. – Louis Jan 14 '17 at 14:39