Backbone.js - How to use a custom model property in a template?
backbone.js, handlebars.js, javascript
Solution
Your `FullName` definition doesn't make any sense so I'm going to assume that you really meant this:
Person = Backbone.Model.extend({
FullName: function() {
return this.get("firstName") + " " + this.get("lastName");
}
});
Usually you'll call `toJSON` on your models to serialize them for use by a template:
var html = template({ person: person.toJSON() })
The default `toJSON` simply returns a (shallow) copy of the model's internal attributes. The attributes will, presumably, have both `firstName` and `lastName` properties but `FullName` is a function on the model so it won't be in the attributes.
You could provide your own `toJSON`:
toJSON: function() {
var j = _(this.attributes).clone();
j.FullName = this.FullName();
return j;
}
and then you'd have a `FullName` in your template. However, `toJSON` is also used to serialize the model to send data to the server; your server would end up seeing a `FullName` and it might get upset about that. You could add another serializer specifically for templates:
// `serialize` is another common name for this
for_template: function() {
var j = this.toJSON();
j.FullName = this.FullName();
return j;
}
and then use that function to supply data for your templates:
var html = template({ person: person.for_template() });
Problem
This might be a really simple question but I'm having a heck of a time finding an answer. Using backbone, I have this line: ``` Person = Backbone.Model.extend(); ``` I then use that in a collection filled from a URL. For the sake of the example, say I have a first and last name, and I want to do something like: ``` Person = Backbone.Model.extend({ FullName: this.get("firstName") + " " + this.get("lastName") }); ``` I can call that inside backbone using, for example, People.first().FullName(). But if I pass People.first() to my view and render that in a template, it seems to have no knowledge what FullName is. How would I add a custom property to a model in Backbone and use that inside a template? Cheers!