7

Say I have these two Backbone.Marionette views:

var FooView = Backbone.Marionette.ItemView.extend({
  tagName: p,
  id: 'foo',
  template: this.templates.summary
});

var BarView = Backbone.Marionette.ItemView.extend({
  template: this.templates.summary
});

And then I want to show them inside an app region, like so:

App.contentRegion.show(new FooView/BarView());

The first view would create a new

element and append it to the region. I thought the second way would be more like a standard Backbone view and attach itself to the region without creating a new element, but it wraps it in a tag. Is there a way to avoid this without using something like setElement()?

T Nguyen
  • 3,309
  • 2
  • 31
  • 48

1 Answers1

6

For this, you should use the attachView method: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#call-attachview-on-region

David Sulc
  • 25,946
  • 3
  • 52
  • 54
  • 1
    Thanks. I had seen that method but wasn't sure why you would want to attach a view without showing it (actually, that's a good sub-question - can someone give a use case?). I played with it a little and was frustrated because I couldn't get it to work, until I realized you have to show the view after you attach it. Here is a jsFiddle that demonstrates it - http://jsfiddle.net/tonicboy/q8Le4/ – T Nguyen Aug 08 '13 at 14:19
  • 2
    Typically, you'll attach a view to HTML that is already displayed (i.e. you're enhancing existing elements with javascript behavior). You can see an example in an old tutorial of mine here: http://davidsulc.com/blog/2012/05/06/tutorial-a-full-backbone-marionette-application-part-1/ Derick also has a n interesting article on progressive enhancement here http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/ talking about the same concept. – David Sulc Aug 08 '13 at 16:35
  • If I'm normally using my controller to instantiate views and call show() on regions to show those views, then is it desirable to have the controller do the attachView as well? If so, when would this happen if it needs to happen when the application starts up? – kinakuta Aug 18 '14 at 16:52
  • Yes, it would happen when the view starts up. Basically, any time you have HTML already present (e.g. rendered by the server) you need to use `attachView` to avoid a "flash" when Backbone rerenders the view. You can also just use `show`, but the view will be blank (i.e. will look like a flash) because the server-side HTML will be emptied and rerendered by Backbone. – David Sulc Aug 19 '14 at 06:51
  • @DavidSulc ok, that makes sense, but it doesn't seem quite as straightforward if I'm trying to attach a CollectionView instance. How does each of the item views end up attaching correctly to the individual parts of that collection view? Do I need to override something for this to work properly? – kinakuta Aug 28 '14 at 07:26
  • Last I looked, this was so invloved I simply went with redisplaying the view. Otherwise, you probably need to try to attach each child view to its DOM element, and attach the parent collection view also. – David Sulc Aug 28 '14 at 11:23
  • Unfortunately this function seems to have been removed by Marionette v3 – CodingWithSpike Feb 27 '17 at 18:55