Using Features in the Underline Pattern

Question

I try to use a function in an Underscore template as shown here , but I get an error:

Uncaught ReferenceError: getProperty not defined

Below is the code I'm using

var CustomerDetailView = Backbone.View.extend({ tagName : "div", template: "#customer-detail-view-template", initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); this.initializeTemplate(); }, initializeTemplate: function() { this.template = _.template($(this.template).html()); }, render: function() { var data = this.model.toJSON(); _.extend(data, viewHelper); console.log(data); var html = _.template($(this.template), data); $(this.el).html(html); return this; } }) 

And the template:

  <script type="text/template" id="customer-detail-view-template"> <div style="height: 70px;"> <span class="displayText"> <p class="searchResultsAuxInfo">Full Name : <%= getProperty("full_name", null) %> </p> <p class="searchResultsAuxInfo">Country Code : <%= getProperty("country_code", null) %></p> <p class="searchResultsAuxInfo">street : <%= getProperty("street", null) %></p> <p class="searchResultsAuxInfo">maiden_name : <%= getProperty("maiden_name", null) %></p> </span> <span class="displayTextRight"> <p class="searchResultsAuxInfo">marital_status_code : <%= getProperty("marital_status_code", null) %></p> <p class="searchResultsAuxInfo">tax_id_number : <%= getProperty("tax_id_number", null) %></p> <p class="searchResultsAuxInfo">primary_phone : <%= getProperty("primary_phone", null) %></p> <p class="searchResultsAuxInfo">customer_number : <%= getProperty("customer_number", null) %></p> </span> </div> </script> 

The auxiliary view object is as follows:

 var viewHelper = { getProperty:function(propertyName, object) { if(typeof(object) === "undefined"){ object = this["attributes"]; } for (i in object) { if (_.isObject(object[i])) { var currentObj = object[i]; if(_.has(currentObj, propertyName)){ return currentObj[propertyName]; } this.getProperty(propertyName, currentObj); } } } } 

Answer 1

Your problem is that when you are inside render , this.template :

 var html = _.template($(this.template), data); 

already a compiled template function:

 initializeTemplate: function() { this.template = _.template($(this.template).html()); } 

_.template call:

Composes JavaScript templates in functions that can be evaluated for rendering.

So you say the following:

 _.template($(some_compiled_template_function).html(), data); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

This is done by the $(function() { ... }) form of $() and that:

Binds a function that executes when the DOM download completes.

This little confusion makes everything go away, and chaos abounds. Correct how you use the template and everything will start to make sense:

 render: function() { //... var html = this.template(data); //... } 

Your this.template will be a function inside render , so name it as a function.

Demo (with some simplifications for clarity): http://jsfiddle.net/ambiguous/SgEzH/

Answer 2

according to the blog article you are linking to

just deleting this line will make it work: "this.initializeTemplate ();"