9

I am trying out Backbone.Marionette and I am confused as to why my Layouts and ItemViews keep generating extra divs.

example is in Coffee btw.

AppLayout = Backbone.Marionette.Layout.extend
  template: "#my-layout",

  regions:
    menu: "#menu",
    content: "#content"

MyMenuView = Backbone.Marionette.ItemView.extend
  template: '#project_wiz_nav_template'

MyContentView = Backbone.Marionette.ItemView.extend
  template: '#project_setup_template'

MyApp = new Backbone.Marionette.Application()

MyApp.addRegions
  mainRegion: '#project'

MyApp.addInitializer ->
  layout = new AppLayout()
  MyApp.mainRegion.show(layout)

  layout.menu.show(new MyMenuView())
  layout.content.show(new MyContentView())

MyApp.start()

This is what index.html contains:

<div id='project'></div>
<script type='text/template' id='project_wiz_nav_template'> <h2>HI</h2> </script>
<script type='text/template' id='project_setup_template'> <h2>WORLD</h2> </script>
<script id="my-layout" type="text/template">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

This is what it produces:

<div id="project">
  <div>
    <h2>Hello!</h2>
    <div id="menu">
      <div> 
        <h2>HI</h2> 
      </div>
    </div>
    <div id="content">
      <div> 
        <h2>WORLD</h2> 
      </div>
    </div>
  </div>
</div>

As you can see, it keeps generating extra divs for the views and the layouts. I've tried adding el: '#menu' and el: '#content' to no avail.

3

3 Answers 3

8

This is not because of Marionette. Backbone generates a <div> class for you by default. You can set the tag via the tagName attribute. See comments on the question for duplicates of this.

10
  • 4
    Thanks for your reply to this Derick. I'm hitting the same thing -- I'd like the view's el to be the selector defined in the Layout's regions hash. It seems like the definition of the view's tag is coming from both directions: from the layout and from the region's view, with no way to skip an intermediate tag.
    – Tres
    Jan 30, 2013 at 22:51
  • @Tres: Did you ever figure out a way to change the extra <div> behavior when showing regions? Mar 19, 2013 at 14:40
  • @Derick Bailey, Is there anyway for Tres's comment to work? I've been working on this for hours and would be a lot easier to work with Mar 26, 2013 at 21:57
  • 2
    Alright, yes, it's Backbone.View behavior. But we use Marionette's Regions to IMPROVE UPON normal Backbone.Views. This behavior is simply unintuitive and makes Regions less useful. Apr 12, 2014 at 8:32
  • 1
    You can use onRender trigger in you views to do this.setElement(this.$el.find('selector'));. The only thing is that you would probably need to create a base class for your ItemView or/and LayoutView... Mar 4, 2015 at 23:06
-1

A hacky workaround, but jQuery's closest() actually did the job for me. Rather than using the returned myView.el directly, I'm using $(myView.el).closest("div").html() -- as I said, hacky, but as a short-term fix it's working.
I was tinkering with this tutorial: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/comment-page-1/#comment-3801, which takes a nested model and creates an accordion view using Bootstrap. I wanted to do the same with his starting point, only using the jQueryUI accordion widget, which is the reason I needed an unwrapped view coming back -- hence the filtering with closest().
Other than adding the jqueryUI links and changing the returned HTML as delineated above, it's working pretty well: http://dartsleague.parentleafarm.com/superheroes/

-3

Specify your el property. I think that will fix it:

http://documentcloud.github.com/backbone/#View-el

3
  • 2
    i tried this and got a Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3. I think this might be more of a marionette thing regarding ItemView, but I'm not sure...
    – corroded
    Jun 25, 2012 at 5:07
  • that error comes from jQuery. it means you're trying to insert a DOM element in an invalid place. For example, you might be trying to insert a <tr> tag in to a <ul> tag, which is not valid. Jun 25, 2012 at 12:40
  • I'm having a really hard time with this issue too. Prior to the 2.x update specifying the el property works. The upgrade breaks this so I'm confused when you say it is a JQuery issue. How does it work in 1.x then? I have a tab control that has stopped functioning with the 2.x update because I'm not able to generate the DOM structure JQuery wants. What has changed in the update to make specifying the el property stop working?
    – Robert
    Aug 7, 2015 at 15:41

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.