Question

Let me elaborate on my setup:
I have precompiled dust.js templates that I would like to use with Backbone.LayoutManager.

Backbone.LayoutManager uses the following configuration:

Backbone.LayoutManager.configure
  manage: true
  fetch: (name) ->
    name

So the name of the template is passed through fetch straight to render, and I’d like to override render like this:

render: (template, context) ->
  done = @async
  dust.render @template, context, (err, out) ->
    throw err if err
    done(out)

But I cannot do this with render (presumably because the LayoutManager author assumed that template rendering would be synch).

Does anyone know how I could accomplish this?

Answer 1

You’ll need to modify the LayoutManger to handle asynchronous rendering of templates.

One of the ways to do this is to use the jQuery Deferred object where the call to render returns an instance of a Deferred object, which you then resolve in the call to the Dust library.

Then, modify Backbone.LayoutManager to NOT continue doing what it wants to with the templates until that Deferred object has been resolve.

in render:

render: (template, context) ->
    dfd = $.Deferred()

    dust.render @template, context, (err, out) ->
        throw err if err
        done(out)
        dfd.resolve()

    return dfd;

You then take the method in Backbone.LayoutManager that calls render and instead of doing something with the return from render you attach that “something” to the done handler for the deferred you passed back.

    dfd = render(template, context)
    dfd.done(do_something_with_this_template);

I’m using Marionette.js (along with it’s async variant) and dust, this is what my core render method looks like:

    render: function(){
        var dfd = $.Deferred();

        var template_context = this.model;
        if(_.isUndefined(template_context) || _.isFunction(template_context)){
            template_context = new (Backbone.Model.extend({}));
        }

        if(this.id) this.$el.attr('id', this.id);

        var that = this;
        dust.stream(this.tpl_name, template_context.toJSON())
            .on('data', function(data){
                that.$el.html(data);
            })
            .on('end', function(){
                dfd.resolve();
                that.enable_menus();
                that.trigger('template:rendered');
            })
            .on('error', function(err){
                dfd.reject();
                window.le(err.message, err);
                that.trigger('template:error');
            });

        return dfd;
    }

(Obviously not using coffeescript either…)