Marionette layoutView - disable default element in layoutVIew

Question

Inheriting from Backbone, Marionette always creates a default div element for view. This behavior gives me confusion when I prepare a template for a view, then suddenly find out, one parent div is created in DOM on top of my template.

I really want all my default HTMLs, class, ids in templates, not in view initialization code.

Is there any way to disable inserting default div in Marionette?

Do you have a top-level, containing element in your template? If so, specify that element for your view definition. Show the markup for your template if you want more detail. — kinakuta, Aug 31 '14 at 20:33

score 0 · Answer 1 · answered Aug 31 '14 at 09:32

0

Reading the documentation reveals the following:

this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

Should apply to Marionette too.

answered Aug 31 '14 at 09:32

m90

11,434
13
62
112

I tried to set tagName:'' in object literal in extend() function, but got an error. "Cannot create <>" – Nicolas S.Xu Aug 31 '14 at 09:45

score 0 · Answer 2 · edited May 23 '17 at 11:49

You can set a tagName but you must give it a tag name, not an empty string. This will surround your template code when it is rendered, just as the div does.

It sounds like you want the View element to 'be' the parent element from the template, perhaps to avoid superfluous divs - I used to get annoyed by this as well, there are ways around it but it is hacky and surfaces issues around rerendering, event binding and nt working for templates that do not have a parent element - for me it caused complications to the point where I have now accepted the divs and moved on :)

This is an approach - Backbone, not "this.el" wrapping but I recommend accepting the divs, if you want to keep the ids and classes in templates you still can do that.

score 0 · Answer 3 · answered Sep 06 '14 at 07:37

to @rwdrwd, I overload the region render function, allowing for render template without root div element.

I am not sure this approach will stop the event binding and conflict with other parts of the backbone yet.

Marionette.Region.prototype.attachHtml = function(view){
     // my code:
     this.el.innerHTML='';
     this.el.innerHTML = view.el.innerHTML;
     // instead 'appendChild', I just assign the innerHTML of the view.el. 

     // Original implementation: 
     // 
     // this.el.innerHTML='';
     // this.el.appendChild(view.el);

};

Do you think this is good practice?

Marionette layoutView - disable default element in layoutVIew

3 Answers3