UI hash problems with Backbone Marionette Layout

Question

In the following Layout, I am adding a CollectionView to display a SELECT list within onRender. Immediately after that, I am using the ui hash to enable or disable all controls within the view. This does not work for the SELECT generated by new App.View.Categories.

Should it? Or does the UI hash not work on Regions within a Layout?

App.View.UploadFile = Backbone.Marionette.Layout.extend({
    template: '#upload-file-template',
    regions:{
        category: 'td:nth-child(4)'
    },
    ui:{
        inputs: 'textarea, select, .save'
    },
    onRender: function(){
        this.category.show(
            new App.View.Categories({
                collection: App.collection.categories
            }) // generates the SELECT list
        );

        console.log(this.ui.inputs); // Length 2. Missing select.
        console.log(this.$('textarea, select, .save')); // Length 3

        this.ui.inputs.prop(
            'disabled', (this.model.get('upload_status')!='staged')
        );
    }
});

Answer 1

This should be working the way you expect it to work. The code in question in the Marionette source is here: https://github.com/marionettejs/backbone.marionette/blob/master/src/marionette.itemview.js#L49-L51

The call to bindUIElements() is what converts the ui hash in to jQuery selector objects, and it is called right before the onRender method is called.

Are you seeing errors? Or is the selector simply returning nothing, and having no affect on the elements?

---

Update:

Ah! Of course... I wasn't paying attention to your code close enough. You're correct in that the UI element selectors happen before you're adding the the sub-view to the region. I've never run in to this situation before... but this seems like something we would want to fix / support.

For now, the best workaround I can suggest would be to call 'this.bindUIElements();' at the very end of your onRender method. This would force the ui elements to re-bind to the selectors.

I'll also add an issue to the github issues list, to look in to a better solution for this. i don't know when i'll be able to get to this, but this will at least get it on the list of things to fix.