dzm*_*dzm 34 javascript node.js express handlebars.js
我在Node.js中有一个应用程序,使用Expressjs和Handlebars作为模板引擎.
Expressjs使用布局然后呈现视图.布局(layout.hbs)如下所示:
<!doctype html>
<html lang="en">
<head>
</head>
<body>
{{{body}}}
</body>
</html>
在{{{body}}}当您访问路径被替换服务器端的node.js内.例如:
app.get('/', function(req, res){
res.render('index'})
})
将{{{body}}}使用index.hbs的内容替换标记.
现在,在客户端我使用Backbone.js并希望使用Handlebars来控制通过Backbone控制的视图.问题是因为这些页面已经通过Handlebars呈现,当我尝试在其中使用Handlebars(或Handlebars中的Handlebars)时,它不起作用.没有错误,它只是不会用数据替换标签.
有没有人遇到这个或有任何想法解决？
谢谢!
Zac*_*tes 74
您应该使用预编译的客户端模板.它们执行速度更快,允许您在服务器和客户端上使用相同的模板语言.
npm install handlebars -ghandlebars client-template1.handlebars -f templates.js<script src="templates.js"></script>var html = Handlebars.templates["client-template1"](context);Til*_*tra 32
一个简单的方法做,这是刚刚追加\前{{的手把文件.例如:
<script type="text/x-template" id="todo-item-template">
<div class="todo-view">
<input type="checkbox" class="todo-checkbox" \{{checked}}>
<span class="todo-content" tabindex="0">\{{text}}</span>
</div>
<div class="todo-edit">
<input type="text" class="todo-input" value="\{{text}}">
</div>
<a href="#" class="todo-remove" title="Remove this task">
<span class="todo-remove-icon"></span>
</a>
上面的代码将在客户端上呈现,并保留{{..}}标记.
occ*_*cam 14
是的,这是一个棘手的问题 - 有点像shell脚本中的引用问题,它成为引用引号的老鼠窝.
我的解决方案是在expressjs(服务器端)中使用jade(la haml)来为客户端输出基于模板的车把.这样,服务器使用一种语法(jade),而客户端使用另一种语法(把手).我和你在同一个十字路口,所以我也有同样的挑战.
当然,玉不是必不可少的(尽管它是为expressjs准备的).您可以为服务器选择任何(非手柄)模板引擎,和/或您可以使用服务器上的把手与客户端上的非手柄进行模板化 - 只要您选择的模板引擎的两个语法不是碰撞.由于我在客户端上使用emberjs并且它使用了Handlebars语法(默认情况下),我更喜欢在客户端上使用emberjs + handlebars语法.所以expressjs + jade成了服务器的天作之用.