CODEWITHSUNDEEP
htmldombackbone.jsmarionette
Algy Taylor
Algy Taylor

Reputation: 834

Avoiding DIV Soup in Backbone.Marionette

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 ... :)

Upvotes: 0

Views: 307

Answers (3)

vjjj
vjjj

Reputation: 1059

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

Upvotes: -1

Algy Taylor
Algy Taylor

Reputation: 834

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! :)

Upvotes: 0

David Sulc
David Sulc

Reputation: 25994

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:

Upvotes: 2

Related Questions