我试图在Underscore模板
as shown here中使用一个函数,但我收到一个错误：
Uncaught ReferenceError: getProperty is not defined
以下是我正在使用的代码
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;
}
})
和模板：
<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>
视图助手对象如下所示：
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);
}
}
}
}
解决方法
你的问题是,一旦你进入渲染,this.template：
var html = _.template($(this.template),data);
已经是一个编译模板函数：
initializeTemplate: function() {
this.template = _.template($(this.template).html());
}
_.template电话：
Compiles JavaScript templates into functions that can be evaluated for rendering.
所以你这样说：
_.template($(some_compiled_template_function).html(),data); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
那就是执行$()的$(function() { ... })形式,并且：
Binds a function to be executed when the DOM has finished loading.
这一点点的混乱让一切都变得混乱和混乱.修复如何使用模板,事情将开始变得更有意义：
render: function() {
//...
var html = this.template(data);
//...
}
你的this.template将是一个渲染内部的函数,所以将其称为函数.
演示(为了清晰起见,进行了一些简化)：http://jsfiddle.net/ambiguous/SgEzH/
