Marionette - is there a better way to get itemViewContainer from a compound

Question

I would like to be able to hide and show the itemViewContainer, but I feel it can be done better.

Here is my code:

MyCompView = Backbone.Marionette.CompositeView.extend({ // ITEM VIEW itemView: MyView, // ITEM VIEW CONTAINER itemViewContainer: 'tbody', // EVENTS events: { 'click #table-toggle': 'onToggleClick' }, onToggleClick: function(event){ event.preventDefault(); this.toggle(); }, // Toggle toggle: function(){ this.$(this.itemViewContainer).toggle(); } 

Here is the template for MyCompView

 <script id='MyCompView-template' type='text/x-handlebars-template'> <div> <span id='heading-container' style="font-weight:bold">Some name</span> <a id='table-toggle' href="#">[-]</a> </div> <table> <thead> </thead> <tbody> </tbody> </table> 

Answer 1

Another option, which is no better in this example, is to use the ui configuration for presentation:

 MyCompView = Backbone.Marionette.CompositeView.extend({ // ITEM VIEW itemView: MyView, // ITEM VIEW CONTAINER itemViewContainer: 'tbody', // UI configuration to cache selectors // ----------------------------------- ui: { table: "tbody" } // EVENTS events: { 'click #table-toggle': 'onToggleClick' }, onToggleClick: function(event){ event.preventDefault(); this.toggle(); }, // Toggle toggle: function(){ this.ui.table.toggle(); } } 

If you reuse the same selector multiple times in your code, this can help reduce duplication. In your case, however, this is a direct duplication of the itemViewContainer selector, so I don't think this is much better.

Answer 2

It is available as an el / $el property, like this.$itemViewContainer . However, there seems to be some kind of race condition, even an attempt to access this.$itemViewContainer after rendering can sometimes fail.

Swing back to re-select it.