Handling undefined attributes in underscore.js templates

Question

I am rendering a single Backbone model in a view. I am using the default underscore template to render the model. How do I handle the "undefined" attribute errors when I am rendering the view (though the model has not loaded)? To clarify, here is an example.

// Using Mustache style markers
_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};

App.Model = Backbone.Model.extend({});

App.Collection = Backbone.Collection.extend({
    model: App.Model
});

App.View = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.template = _.template($('#model_template').html());
        this.model.bind('reset', this.render);
    },
    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;
    }
});

// HTML
<div id="container"></div>
<script id="model_template" type="text/template">
    <strong>Name:</strong> {{ name }} <br/>
    <strong>Email:</strong> {{ email }} <br/>
    <strong>Phone:</strong> {{ phone }}
</script>

// Run code
var collection = new App.Collection;
var view = new App.View(model: collection.at(0));
$('#container').html(view.render().el);
collection.fetch();

When this code is run, the view is rendered twice, first with an empty model and second when the AJAX query is complete (and 'reset' is triggered). But the issue I am facing is JS stops at the first instance when the model is empty. It gives an error saying the model attribute is undefined.

What am I doing wrong here? Can I suppress the 'undefined' error when the view is rendered in the first instance?

Answer 1

There are a few things going wrong with what you do:

When you do:

// Run code
var collection = new App.Collection;
var view = new App.View({model: collection.at(0)});
$('#container').html(view.render().el);
collection.fetch();

First, you create the collection. It does not yet have any models associated with it. So when next you initialize the view with the collection's first model that does not yet exist. The correct way to do that is to fetch() the collection and when that has completed create the view. Something like:

var p = collection.fetch();
p.done(function () {
  var view = new App.View({model: collection.at(0)});
  ...
}

It is also better to give the container element to the view. You can do that by simply

var view = new App.View({model: collection.at(0), el: '#container'});

Answer 2

One option is to define default empty values for your model.

App.Model = Backbone.Model.extend({
  defaults: {
    name: '',
    email: '',
    phone: ''
  }
});

Answer 3

To avoid the undefined variable error while rendering underscore template, pass the template data inside a wrapper object. Missing property access won't throw an error.

var template = _.template($('#template').html());
var data = {name:'Jeo'}; // phone not available
template({data:data});
// Output: Jeo 

<div id="template">
    {{data.name}} {{data.phone}}
</div>

Answer 4

I'd also suggest using Distal templates.