Access Nested Backbone Model Attributes from Mustache Template

Question

I have one Backbone model which has an attribute that is a reference to another Backbone model. For example, a Person has a reference to an Address object.

Person
  FirstName
  LastName
  Address
    Street
    City
    State
    Zip

These are classes that extend the Backbone model. So, then if I construct an object like the following...

var address = new Address({ Street: "123 Main", City: "Austin" });
var person = new Person({ FirstName: "John", Address: address });

I cannot seem to figure out how to access it in my Mustache template.

Hi {{FirstName}}, you live in {{Address.City}}.

Obviously does not work. When I look at the internals in Firebug, Address is an object, but the City is an attribute within the attributes object of Address. I cannot find any examples of how to access these attributes of associated objects.

I appreciate any help! Thanks!

Answer 1

Try using Handlebars, a templating engine based on Mustache with nested properties support.

Then it would be as easy as {{Address/City}}.

If you don't want to change your templating engine, you can flatten results from Address object and pass them as properties directly on the Person.

Answer 2

I ended up solving this issue with the following approach.

I switched from Mustache.js to Handlebars.js for the templating engine. This allowed me to use path based expressions to access nested or associated objects and their attributes.

Hi {{FirstName}}. You live in {{Address.City}}.

But, I also had to change the way I was passing a JSON object to the template. I was using the toJSON method that is part of the Backbone.Model class. But, this was not generating JSON for the associated Address correctly (for the templating to work.) It was burying the address attributes in a member titled "attributes". So, instead, I ended up doing this...

var jsonForTemplate = JSON.parse(JSON.stringify(person));

This gave me a "raw" version of the objects and their associated objects which the template could access using the syntax shown above. JSON.parse and JSON.stringify are both part of json2.js.

Answer 3

I handled this by making another version of toJSON called deepToJSON that recursively traverses nested models and collections. The return value of that function can then be passed to a handlebars.js template.

Here is the code:

_.extend(Backbone.Model.prototype, {
  // Version of toJSON that traverses nested models
  deepToJSON: function() {
    var obj = this.toJSON();
    _.each(_.keys(obj), function(key) {
      if (_.isFunction(obj[key].deepToJSON)) {
        obj[key] = obj[key].deepToJSON();
      }
    });
    return obj;
  }
});

_.extend(Backbone.Collection.prototype, {
  // Version of toJSON that traverses nested models
  deepToJSON: function() {
    return this.map(function(model){ return model.deepToJSON(); });
  }
});

Answer 4

The way to go about the same in Mustache would be as follows:

Hi

{{FirstName}}, you live in {{#Address}}{{City}} {{/Address}}

Hope it helps..