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.

Answer 1

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

Answer 2

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();

Answer 3

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.