javascript 在下划线模板中使用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10401837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using functions in a underscore template
提问by user1368258
I am trying to use a function in an Underscore template as shown herebut I am getting an error:
我正在尝试在 Underscore 模板中使用函数，如下所示，但出现错误：
Uncaught ReferenceError: getProperty is not defined
未捕获的 ReferenceError：getProperty 未定义
Below is the code I am 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 view helper object looks like this:
视图助手对象如下所示：
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);
}
}
}
}
回答by mu is too short
Your problem is that once you're inside render, this.template:
你的问题是，一旦你进去render，this.template：
var html = _.template($(this.template), data);
is already a compiled template function:
已经是一个编译好的模板函数：
initializeTemplate: function() {
this.template = _.template($(this.template).html());
}
The _.templatecall:
该_.template呼叫：
Compiles JavaScript templates into functions that can be evaluated for rendering.
将 JavaScript 模板编译为可用于渲染的函数。
So you're saying this:
所以你是这样说的：
_.template($(some_compiled_template_function).html(), data);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
That is executing the $(function() { ... })form of $()and that:
那是执行 和 的$(function() { ... })形式$()：
Binds a function to be executed when the DOM has finished loading.
绑定要在 DOM 加载完成后执行的函数。
That little bit of confusion makes everything go haywire and chaos abounds. Fix how you use the template and things will start making more sense:
那一点点混乱让一切都变得混乱，混乱比比皆是。修复您使用模板的方式，事情就会变得更有意义：
render: function() {
//...
var html = this.template(data);
//...
}
Your this.templatewill be a function inside renderso call it as a function.
您this.template将成为内部的一个函数，render因此将其称为函数。
Demo (with some simplifications for clarity): http://jsfiddle.net/ambiguous/SgEzH/
演示（为了清楚起见做了一些简化）：http: //jsfiddle.net/ambiguous/SgEzH/
回答by delai
according to the blog article you refer to,
根据您参考的博客文章，
just delete this line will make it work: "this.initializeTemplate();"
只需删除这一行即可使其工作：“this.initializeTemplate();”
