is it possible to avoid adding default view element "div" when using appendHtml() in Marionette?

Question

I am appending manually the view to a dom element in my template with the following code:

appendHtml: function(collectionView, itemView, index){
      collectionView.$("ul#search_list_container").append(itemView.el);
}

In my template I have:

<script id='search-list-grid-template' type='text/x-handlebars-template'>
    <ul id="search_list_container"></ul>
</script>

Despite I am appending the view to the ul#search_list_container I have the default div wrapping the template:

<div>
    <ul id="search_list_container">
    <a href="#">
        <span id="search_list_item">
            id
            invoice_number
        </span>
    </a>
    </li>
    </ul>
</div>

is there a way to avoid displaying the default tag "div"?, I have no problem with this but this doubt has always come to my mind whenever I come up with this example.

Note: I have an itemView for the ul compositeView, and some other stuff not shown here.

possible duplicate of [Extra divs in itemviews and layouts in Backbone.Marionette](http://stackoverflow.com/questions/11183130/extra-divs-in-itemviews-and-layouts-in-backbone-marionette) — Derick Bailey, Dec 31 '12 at 14:13
additional duplicates of the question: http://stackoverflow.com/questions/7663895/backbone-js-how-to-remove-extra-tag-in-view http://stackoverflow.com/questions/11195242/extra-wrappers-in-backbone-and-marionette there are dozens of others as well, all with the same issue and answer — Derick Bailey, Dec 31 '12 at 14:16
I felt it warranted an answer because of the collection template — MarkKGreenway, Jan 01 '13 at 18:22

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

Backbone Views are designed to have their own DOM element stored as the view's el property.

It is not recommended to remove the view's element as suggested by Steven-Farley, because events might be bound to it.

The best way would be to change the tagName property of your collectionView to ul.

See also: Extra divs in itemviews and layouts in Backbone.Marionette

edited May 23 '17 at 12:09

Community

1
1

answered Jan 02 '13 at 19:48

Ruben Vreeken

956
1
13
22

This does not work when the DOM element you want to render to is an existing region. JQuery UI tabs is an example. If your ul is already in the DOM (a region rendered dynamically), and you then want li's to render directly into it (no wrapper), setting the collectionView tagName property won't work. Your collection will simply be wrapped by that tag. We need the ability to render items directly into an existing element sometimes. Why isn't this an option anymore in Marionette 2.x? It was an option via setting a collectionView's el property in 1.x. Post 2.x update it generates an error. – Robert Aug 13 '15 at 21:38
HierarchyRequestError – Robert Aug 13 '15 at 21:43
My first instinct is that the region should probably not be something quite as semantically specific as a 'ul' tag. You could make the region a 'div', have the collectionView be a 'ul' and the children can be 'li' again. I'm not sure about the current state in 2.x, haven't used backbone or marionette lately. – Ruben Vreeken Aug 17 '15 at 15:42

PhearOfRayne · Answer 2 · 2012-12-30T05:08:30.167

1

With jQuery you could use .unwrap().

Try this:

Change:

collectionView.$("ul#search_list_container").append(itemView.el);

To:

collectionView.$("ul#search_list_container").append(itemView.el).unwrap();

edited Dec 30 '12 at 05:08

answered Dec 30 '12 at 04:54

PhearOfRayne

4,990
3
31
44

Is this the correct way to solve this issue? Does it have any side effects? – Konza Oct 11 '13 at 06:52

score 1 · Answer 3 · answered Dec 30 '12 at 17:04

Couple of things about this Collection View does not need a template,

it either renders the

empty view

Or The

Item View

depending on whether the collection has anything or not.

that being said if you dont want the "div" in each item. try adding

var yourItemView= Backbone.Marionette.ItemView.extend({
             tagName: "li",
          //OTHER STUFF HERE
          });

then remove the wrapping <li> from your item template.

You shouldnt need to modify appendHtml att all for this use case.

is it possible to avoid adding default view element "div" when using appendHtml() in Marionette?

3 Answers3