把手包括部分两次，一次转义和一次渲染

Question

我有一个把手部分，我想在我的页面上包含两次。 一旦正常的HTML被解析和显示，一旦作为转义的HTML显示给用户（类似于Bootstrap文档，如下图所示）：

在下划线模板中它只是：

    {% examples/buttons %}
    <code>
        {%- examples/buttons %}
    </code>

我怎样才能在Handlebars中完成它？

我在node.js服务器上渲染这些文件，并使用内置的partials功能 （这不起作用。我无法弄清楚是什么让第二个看起来像是告诉它逃避HTML）：

    {{> examples/buttons }}
    <code>
        {{> examples/buttons }}
    </code>

Answer 1

使用自定义帮助程序将部分HTML作为文本返回

输出部分文本转义内容没有本机语法，但您可以创建表达式帮助程序来为您执行此操作。

在下面的示例中，帮助器返回partial的原始编译输出，甚至允许您使用“triple-stash” {{{表示典型输出。

请注意，帮助程序的语法不如本机部分语法友好，您必须将当前上下文作为参数传递：

{{! unescaped HTML output (renders HTML as HTML) }}
{{{output "header" this}}}

{{! escaped HTML output (renders HTML as text) }}
{{output "header" this}}

 $(function() { // Register a helper called "output" Handlebars.registerHelper('output', function(partial, context) { // Create compiler function for said partial var output = Handlebars.compile(Handlebars.partials[partial]); // Return compiled output using said context return output(context); }); // Register a partial called "header" Handlebars.registerPartial('header', $("#partial-header").html()); // Create compiler function for main template var template = Handlebars.compile($("#template").html()); // Render compiled output as HTML to `#rendered` using provided context (JSON) $("#rendered").html( template( { "title": "My Cool Header" } ) ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> <script id="template" type="text/x-handlebars-template"> {{{output "header" this}}} {{output "header" this}} </script> <script id="partial-header" type="text/x-handlebars-template"> <h1>{{title}}</h1> </script> <div id="rendered"></div> 

Answer 2

我花了几个小时寻找解决方案。 这些天来，明确的车把生态系统似乎非常休眠。 问题的根源是您希望将相同的模板文件（ .hbs ）作为纯文本文件和解释模板传递。

我提出的解决方案并不涉及逃避。 可能有办法编写一个逃避模板的帮助程序，但我的建议是使用Node的fs来读取系统上的文件并将其存储为局部变量并将其传递给app render函数。

在外部文件中：

 var fs = require('fs'); var codeDir = './src/jquery/'; var exampleCode = { badge: { siteExample: fs.readFileSync(codeDir + 'badge/examples/site-example.js', 'utf8') } }; module.exports = exampleCode; 

在app.js ：

 // Render code example pages app.get('/jquery', function (req, res) { var locals = {}; res.render('jquery/', locals, function () { locals.code = codeExampleScripts; res.render('jquery/index', locals); }); }); 

Answer 3

比较“stash” {{ vs.“triple-stash” {{{

Handlebars HTML-escapes {{expression}}返回的值。 如果您不希望Handlebars转义值，请使用“triple-stash”， {{{ 。

http://handlebarsjs.com/#html-escaping

Answer 4

这可以使用自定义块帮助程序完成：

// [this is in /lib/hbs-helpers.js file]
exports.escapedPartial = function (partials, partialName, data) {
     return partials[partialName](data.hash);
};

注册快递车把 ：

// [this is in js file which starts the express app, probably app.js]
var expressHandlebars       = require( 'express-handlebars' );
var handlebarsHelpers       = require('./lib/hbs-helpers');

var hbs = expressHandlebars.create({
    defaultLayout: 'master',
    extname: ".hbs",
    helpers: handlebarsHelpers,
    partialsDir: "views/partials"
});

// Configuring view engine
app.engine('.hbs', hbs.engine);
app.set('view engine', '.hbs');

最后在把手模板本身内使用（在某些hbs文件中，如button-docs.hbs ）。 @exphbs.partials必须通过，以便帮助者可以访问部分（可能有另一种更好的方式来访问这个全局，但是，我不知道）：

    {{> examples/buttons foo="bar"}}
        <code>
{{escapedPartial @exphbs.partials "examples/buttons" foo="bar"}}
        </code>

Answer 5

对于这个用例，我只能使用\\ ：

{{> examples/buttons }}
<code>
    \{{> examples/buttons }}
</code>