uso de funciones en una plantilla subrayado

Question

Estoy tratando de utilizar una función en una plantilla subrayado as shown here pero estoy consiguiendo un error:

Uncaught ReferenceError: getProperty is not defined

A continuación se muestra el código que estoy utilizando

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; 
    } 
}) 

Y la plantilla:

<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> 

el objeto del ayudante de vista es el siguiente:

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

Su problema es que una vez que estás dentro render, this.template:

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

es ya una función de plantilla compilada:

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

La llamada _.template:

Compiles JavaScript templates into functions that can be evaluated for rendering.

¿Estás diciendo esto:

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

que se está ejecutando la forma de $(function() { ... })$() y que:

Binds a function to be executed when the DOM has finished loading.

Ese poco de confusión hace que todo se descomponga y el caos abunda. Fijar cómo se utiliza la plantilla y las cosas van a empezar a hacer más sentido:

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

Su this.template habrá una función dentro de render llamarla así como una función.

Demo (con algunas simplificaciones para mayor claridad): http://jsfiddle.net/ambiguous/SgEzH/

Answer 2

de acuerdo con el artículo del blog que se refieren a,

simplemente eliminar esta línea de hacer que funcione: "this.initializeTemplate();"