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!
defaults() The Backbone. js defaults model is used to set a default value to a model. It ensures that if a user doesn't specify any data, the model would not fall with empty property.
The Backbone. js View el method defines the element that is used as the view reference. this. el is created from the view's tagName, className, id and attributes properties, if specified.
The Backbone. js collection models specify the array or models which are created inside of a collection. Syntax: collection.
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() });
I struggled with this for a while too, but I found a solution.
Its covered in a fair amount of depth, including a solution to the issue of toJSON being used to send the server data, in Backbone Computed Properties
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With