Question

I managed to make the following code render the template correctly. home is a precompiled template name.

app.HomeView = Backbone.View.extend({
  el: '#main',
  template: 'home',
  render: function(){
    var self = this;
    dust.render(this.template, {name:'world'}, function(err,out){
      self.$el.html(out);
    });
    return this;
  }
});

However, it’s not very neat to mess up with the self and dust callback stuffs since I have many templates.

Is it possible to clean it up, just as using the underscore templates (shown as follows)?

template: _.template( $('#some-template').html() ),
render: function(){
  this.$el.html(this.template( {name:'world'} ));
  return this;
}

Answer 1

I haven’t actually used dust, but from looking at the docs it looks like there is no way around using a callback like in your example above. You can, however, get rid of the self variable by scoping this to the callback method by using bind like so:

render: function(){

  dust.render(this.template, {name:'world'}, function(err,out){
      this.$el.html(out);
  }.bind(this));

  return this;
}

Doesn’t completely solve your problem but it’s useful to know about bind anyhow. Be aware though that it isn’t supported by all browsers (IE 8 for example). However, you can easily add the functionality to browsers which don’t support it. MDN have a nice little solution which I use.

Alternatively you could easily achieve exactly what you want by using underscore’s built in templating, although admittedly you will have to build your own template caching thing to do pre-compilation of templates.

render: function(){
  this.$el.html(_.template(this.template));
  return this;
}