Javascript 将变量传递给主干模板时，如何在模板中引用它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10404112/
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
when passing a variable into a backbone template, how to reference it in the template?
提问by Nambi
the Template looks like this.
模板看起来像这样。
<div>
<H5>Status for your request</H5>
<table>
<tbody>
<tr>
<th>RequestId</th>
<th><%=id%></th>
</tr>
<tr>
<th>Email</th>
<th><%=emailId%></th>
</tr>
<tr>
<th>Status</th>
<th><%=status%></th>
</tr>
</tbody>
</table>
</div>
This is the View Javascript that renders the page.
这是呈现页面的 View Javascript。
window.StatusView = Backbone.View.extend({
initialize:function () {
console.log('Initializing Status View');
this.template = _.template(tpl.get('status'));
},
render:function (eventName) {
$(this.el).html(this.template());
return this;
},
events: { "click button#status-form-submit" : "getStatus" },
getStatus:function(){
var requestId = $('input[name=requestId]').val();
requestId= $.trim( requestId );
var request = requests.get( requestId );
var statusTemplate = _.template(tpl.get('status-display'));
var statusHtml = statusTemplate( request );
$('#results-span').html( statusHtml );
}
});
When the clicks on the input, the requestId is read and the status is appended in html element with id 'results-span'.
单击输入时，将读取 requestId 并将状态附加到 id 为“results-span”的 html 元素中。
The failure happens when replacing the values in html-template with variable values.
将 html-template 中的值替换为变量值时会发生故障。
var statusTemplate = _.template(tpl.get('status-display'));
var statusHtml = statusTemplate( request );
The rendering fails with the following error.
渲染失败并出现以下错误。
Uncaught ReferenceError: emailId is not defined
(anonymous function)
_.templateunderscore-1.3.1.js:931
window.StatusView.Backbone.View.extend.getStatusstatus.js:34
jQuery.event.dispatchjquery.js:3242
jQuery.event.add.elemData.handle.eventHandle
回答by mu is too short
Underscore's _.template:
下划线_.template：
Compiles JavaScript templates into functions that can be evaluated for rendering.
[...]var compiled = _.template("hello: <%= name %>"); compiled({name : 'moe'}); => "hello: moe"
将 JavaScript 模板编译为可用于渲染的函数。
[...]var compiled = _.template("hello: <%= name %>"); compiled({name : 'moe'}); => "hello: moe"
So basically, you hand the template function an object and the template looks inside that object for the values you use in your template; if you have this:
因此，基本上，您将模板函数传递给一个对象，模板会在该对象内部查找您在模板中使用的值；如果你有这个：
<%= property %>
in your template and you call the template function as t(data), then the template function will look for data.property.
在您的模板中，您将模板函数调用为t(data)，然后模板函数将查找data.property.
Usually you convert the view's model to JSON and hand that object to the template:
通常，您将视图的模型转换为 JSON 并将该对象传递给模板：
render: function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
I don't know what your eventNameis or what you're planning to do with it but you need to get an object with this structure:
我不知道你eventName是什么或你打算用它做什么，但你需要得到一个具有这种结构的对象：
data = { id: '...', emailId: '...', status: '...' }
from somewhere and hand that to the template function:
从某个地方并将其交给模板函数：
var html = this.template(data)
to get some HTML to put on the page.
获取一些 HTML 以放置在页面上。
Demo (with a fake model for illustrative purposes): http://jsfiddle.net/ambiguous/hpSpf/
演示（为了说明目的使用假模型）：http: //jsfiddle.net/ambiguous/hpSpf/
回答by kta
OptionalExtrasView = Backbone.View.extend({
initialize: function() {
this.render();
},
render: function() {
// Get the product id
//var productid = $( this ).attr( "productid" );
var data = {name : 'moe'};
var tmpl = _.template($('#pddorder_optionalextras').html() );
this.$el.html(tmpl(data));
}
});
var search_view = new OptionalExtrasView({ el : $('.pddorder_optionalextras_div')});
and just before the body tag:
就在 body 标签之前：
<script type="text/template" id="pddorder_optionalextras">
<%= name %>
</script>
