Is it possible to avoid adding the default div element when using appendHtml () in Marionette?

I manually add a view to the 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:

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

Although I am adding a view to ul # search_list_container, I have a 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 any way to avoid displaying the default tag "div" ?, I have no problem with this, but this doubt always occurred to me when I come up with this example.

Note. I have an itemView for ul compositeView and some other things that are not shown here.

+7
source share
3 answers

The Views trunk is designed to have its own DOM element stored as a view el property.

It is not recommended to remove the view element proposed by Stephen-Farley, because events can be associated with it.

A better way would be to change the tagName property of your collectionView to ul .

See also: Additional divs in element views and layouts in Backbone.Marionette

+5
source

With jQuery you can use . unwrap () .

Try the following:

Change:

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

To:

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

A few things about this Collection View does not need a template ,

it either displays

Or
depending on whether the collection has something or not.


this is said if you do not want a "div" in each element. try adding

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

then remove the <li> wrap from your element template.

You do not need to modify appendHtml for all this use case.

+1
source

All Articles