与Handlebars.js在服务器和客户端的Node.js与Handlebars.js在服务器和客

我一直在使用Expressjs和把手作为模板引擎的Node.js应用程序。

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的，并希望使用手把经由骨干控制的看法。问题是，因为这些网页是通过把手已经呈现，当我尝试（在车把或车把）都在它使用的手把它不工作。有没有错误，它只是简单地不与数据替换标签。

有没有人遇到过这样或有什么想法周围的工作？

谢谢！

Answer 1:

是啊，这是一个棘手的问题---有点像在shell脚本的报价问题，这成为引述报价的大鼠窝。

我的解决方案是使用玉expressjs（一拉HAML）（服务器端）基于客户端模板输出车把。以此方式，服务器使用一个语法（玉），以及客户端使用另一（把手）。我在同一个十字路口，你，所以我也有同样的挑战。

当然，玉是不是必需的（虽然它是现成的expressjs）。你可以选择服务器的任何（非车把）模板引擎，和/或你可以与你的客户端上的非车把模板使用服务器上的把手---只要你选择的模板引擎的两种语法不碰撞。由于我使用的客户端上emberjs它使用车把语法（默认），我更喜欢使用客户端上emberjs +车把语法。所以expressjs +玉成了自然选择的服务器。

Answer 2:

您应该使用预编译的客户端模板。他们更快执行，并允许您使用相同的模板语言在服务器和客户端上。

安装把手全球npm install handlebars -g
预编译模板handlebars client-template1.handlebars -f templates.js
包括templates.js <script src="templates.js"></script>
执行该模板var html = Handlebars.templates["client-template1"](context);

https://stackoverflow.com/a/13884587/8360

Answer 3:

一个简单的方法做，这是刚刚追加\之前{{在车把文件。例如：

<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>

上面的代码将使用{{..}}标签保存在客户端上呈现。

Answer 4:

无耻的自我推销！

我想这样做相同的客户端/服务器共享的事情，所以我写了一个小NPM包，以帮助：

节点车把-预编译器

我根据在wycats'车把回购的命令行编译几个小时翻飞起来。这不是世界上最伟大的代码，但它已经让我的工作做得非常好。

编辑：我不再坚持这个包。 如果您想接手，请通过Github上与我联系。 我现在主要用玉的模板，所以它没有任何意义，我将继续为维护。

Answer 5:

我已经通过服务器端模板通过客户端模板解决此工作。

因此，在服务器端读取您的所有客户端模板到一个数组并将它传递给你的渲染功能在服务器端

在你的路由处理程序做这样的事情：

readTemplates(function(err, clientTemplates) {
  res.render("page", {
    clientTemplates: clientTemplates;   
  });
});

然后在layout.hbs：

{{#each clientTemplates}}
<script type="text/handlebars id="{{this.filename}}" >
{{{this.template}}}
</script>
{{/each}}

在这里，我使用的文件名没有扩展为模板ID，以便他们可以从骨干网的观点进行引用。哦，记得要实施生产模式缓存。

是啊，这吮吸。

我认为，我们应该写一个把手/快速/连接帮手这一点。

Answer 6:

你有两个选择。二是最好的一段路要走：

1）逃离小胡子

<script type="text/x-handlebars" data-hbs="example">
  <p>\{{name}}</p>
</script>

2）预编译

它关系到客户端之前，这将编译服务器上的模板。这将使该模板准备使用，并减少了对浏览器的负担。

Answer 7:

我不喜欢预编译的解决方案（因为我想在同一个文件中定义的模板，我将使用它们），也不是幼稚\{{逃生的解决方案（因为它需要完整的把手编译器和更多的JavaScript代码），所以我想出了与使用把手助手的混合溶液：

1）注册了一个名为“模板”的服务器配置新帮手

var hbs = require('hbs');
hbs.registerHelper("template", function(key, options){
    var source = options.fn().replace("\\{{", "{{");
    var ret =
    '<script>\n' + 
        key + ' = function(opt){\n' +
            'return Handlebars.template(' + hbs.handlebars.precompile(source) + ')(opt);\n' +
        '}\n' + 
    '</script>';
    return ret;
});

2）使用它随时随地在您的客户端网页（与\{{逃脱客户端参数）

{{#template "myTemplate"}}
    <div>
        <p>Hello \{{this.name}}!</p>
    </div>
{{/template}}

（服务器将预编译它是这样的）

<script>
    myTemplate = function(opt){
        return Handlebars.template(/* HBS PRECOMPILATED FUNCTION */)(opt);
    }
</script>

3）简单地调用该函数在你需要它的客户端JavaScript

var generatedHtml = myTemplate("world");   // = <div><p>Hello world!</p></div>
$("#myDiv").html(generatedHtml);           // or whatever

文章来源: Node.js with Handlebars.js on server and client