Availability of UI elements in Marionette.View

Question

I'd just like to understand the decisions behind Backbone.Marionette's view regarding UI elements. When instantiating a Marionette.View on an existing DOM element, like this:

view = new Marionette.ItemView({
     el: "#element",
     ui : {
         whatever : "#whatever"
     }
});

I am able to access view.$el, the jquery selector inside view.initialize, so far so good. However, when I try to access view.ui.whatever, I only have access to the selector, ie the string "#whatever" instead of the actual $("#whatever") jquery selector.

The reason for this is because Marionette.View.bindUIElements() is only called on render and not before initialize.

I would like to know if you think this behaviour is logic and why?

I am only asking in the case of attaching of the view to an existing el, if the view is created with a template, I do understand why the binding is in render().

Answer 1

Attaching a view to an existing element is the exception. The normal view lifecycle involves calling render, and without doing that there would be nothing for the UI elements to bind to.

Just call this.bindUIElements() in your initialize method when you need to attach a view to an existing element.

Answer 2

When I am working with Marionette, I put the code that has to access the ui elements inside the onShow method. This event is fired after the dom is ready and the elements are ready to be manipulated. Inside this method, your ui.whatever will now be pointing to an element and not a string.