我正在使用下划线模板创建一个 HTML 列表,该列表包含一个我想要全局化的日期字段。模板的简化如下所示:
<li>Date: <%= date %> </li>
这个日期是一个 Javascript 日期对象,所以不想直接打印值,我想使用 globalize 打印它。如果没有模板,解决方案应如下所示:
var html = "<li>Date: " + Globalize.format(settings.get('lastUpdate'),'F') + "</li>";
你认为我可以使用模板来实现这个还是我必须使用变通方法?
最佳答案
您可以在模板中调用任何全局可访问的函数。所以,如果 Globalize
是全局的(即 window
的属性),则此模板:
<script id="tmpl" type="text/html">
<li>Date: <%= Globalize.format(date, 'F') %></li>
</script>
将与这个 JavaScript 一起工作:
_.template($('#tmpl').html(), {
date: some_date_that_globalize_understands
});
如果你没有 Globalize
全局可用然后你可以:
window.Globalize = Globalize;
使其全局可用或仅手动将其添加到模板的命名空间:
_.template($('#tmpl').html(), {
Globalize: Globalize,
date: some_date_that_globalize_understands
});
演示:
- > Global
Globalize
throughwindow.Globalize
. . - > Local
Globalize
through the_.template
parameters. .
Underscore 模板并没有什么特别之处,里面的东西 <%= %>
只是 JavaScript 代码,最终包裹在 with
block 中.您甚至可以通过查看 source
查看函数的源代码返回的模板函数的属性:
var t = _.template($('#t').html());
console.log(t.source);
你会看到一些相当简单(如果丑陋)的 JavaScript,如下所示:
function(obj){
var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
with(obj||{}){
__p+='\n '+
( Globalize.mangle(pancakes) )+
'\n';
}
return __p;
}
那个+ (Globalize.mangle(pancakes) )+
位是什么<%= Globalize.mangle(pancakes) %>
变成了。没有魔法,没有对 <%= ... %>
的内容进行特殊解析,只是一个简单(但有效)的 JavaScript 转换。
关于javascript - 结合 jQuery Globalize 和 underscore.js 模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10849670/