Backbone.js - How to use the property of a custom model in a template?

Question

This may be a very simple question, but I have time to find the answer.

Using the trunk, I have this line:

Person = Backbone.Model.extend(); 

Then I use this in a collection filled with URLs. For example, let's 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 name this backbone using, for example, People.first (). FullName (). But if I pass People.first () to my view and do it in the template, it doesn't seem to know what FullName is.

How do I add a custom property to a model in Backbone and use it inside the template?

Hooray!

Answer 1

Your definition of FullName makes no sense, so I'm going to suggest that you really meant it:

 Person = Backbone.Model.extend({ FullName: function() { return this.get("firstName") + " " + this.get("lastName"); } }); 

Usually you call toJSON your models to serialize them for use by the template:

 var html = template({ person: person.toJSON() }) 

default toJSON simply returns a (shallow) copy of the model’s internal attributes. Presumably, attributes have the properties firstName and lastName , but FullName is a function on the model, so it will not be in the attributes.

You can provide your own toJSON :

 toJSON: function() { var j = _(this.attributes).clone(); j.FullName = this.FullName(); return j; } 

and then you will have FullName in your template. However, toJSON also used to serialize the model to send data to the server; your server will see FullName , and this may be frustrating about this. You can 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 this function to provide data for your templates:

 var html = template({ person: person.for_template() }); 

Answer 2

I struggled with this for too long, but I found a solution.

It covers a lot of depth, including the solution to the problem of using JSON to send server data to "Basic Computing"

Answer 3

 var Person = Backbone.Model.extend({ parse: function (model) { model.FullName = model.FirstName + ' ' + model.LastName; return model; } }); 

Answer 4

There is a much simpler method. Include your method in your initialization method. When you instantiate your model, all your methods are also created.

 var model = Backbone.Model.extend({ initialize : function(){ this.myCustomMethod = function(){ return 'Something'; }; }, idAttribute : 'id', urlRoot : '' }); 

Answer 5

A completely different workaround:

 Backbone.Model.extend({ defaults: function() { this.set('fullName', this.fullName.bind(this)) }, fullName: function() { return this.get('firstName') + this.get('lastName'); } }); 

Thus, the function "fullName" can be called directly on the model

 model.fullName() 

or via get , allowing it to be called from a template:

 model.get('fullName')()