Sử dụng chức năng trong một gạch mẫu

Question

Tôi đang cố gắng sử dụng một hàm trong một gạch mẫu as shown here nhưng tôi nhận được một lỗi:

Uncaught ReferenceError: getProperty is not defined

Dưới đây là đoạn code tôi đang sử dụng

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

Và mẫu:

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

Đối tượng xem helper trông như thế này:

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

Vấn đề của bạn là một khi bạn đang ở trong render, this.template:

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

đã là một mẫu chức năng biên dịch:

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

Các _.template gọi:

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

Vì vậy, bạn đang nói điều này:

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

Đó là thực hiện các hình thức $(function() { ... }) của $() và rằng:

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

Đó chút bối rối làm cho tất cả mọi thứ đi haywire và hỗn loạn đầy dẫy. Fix cách bạn sử dụng mẫu và mọi thứ sẽ bắt đầu thực hiện ý nghĩa hơn:

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

bạn this.template sẽ là một chức năng bên trong render nên gọi nó là một hàm.

Demo (với một số đơn giản hóa cho rõ ràng): http://jsfiddle.net/ambiguous/SgEzH/

Answer 2

theo bài viết trên blog bạn tham khảo,

chỉ cần xóa dòng này sẽ làm cho nó hoạt động: "this.initializeTemplate();"