Question

I’m new to this so please bear with me. I’m trying to add an item view to another item view but the render method on the nested view item returns a deferred object.

Here is the code:

(function (ns, _, $, Backbone) {

///////////////////////////////////////////////////////////////////////////////////////
// Signup state
///////////////////////////////////////////////////////////////////////////////////////

var SignUp = Backbone.Marionette.ItemView.extend({
    template : "#signup-tmpl",
    events : {
        'click .signup' : 'signup'
    },

    signup : function () {
        console.log('signup clicked');
        ns.app.layout.app.show(ns.views.register);
    },
    onRender : function() {
        console.log('On render', this.el);

        var user = ns.views.user.render();
        // user returns an a deferred object
        // so the code below does not work

        this.$el.find('#user').html(test.el);


    }
});

ns.views.signup = new SignUp();

}(H5, _, $, Backbone));

I did a bit of reading and the fix I found was to render the view but grab it’s el property (Backbone.Marionette nested ItemView either not rendering or rendering "blank" view/template) afterwords. The problem is that “user” returns a deferred object instead.

Any ideas as to what’s going on here?

Answer 1

You’re using Marionette.Async? The returning of a deferred object from render is necessary to facilitate the way Async works with templates, data, and rendering that are all done asynchronously.

The only way to make render not return a deferred is to not use Marionette.Async – and FWIW, I recommend that solution. Async shouldn’t be done in the views, directly, IMO. It should be handled by the app workflow, at an abstraction one or more steps above the view implementations.