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

Question

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

在下划线模板中，它只是：

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

如何在Handlebars中完成它？

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

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

Answer 1

使用自定义助手

将部分HTML作为文本返回

没有用于输出部分文本转义内容的原生语法，但您可以创建expression helper来为您执行此操作。

在下面的示例中，帮助程序返回partial的原始编译输出，甚至允许您使用＆＃34; triple-stash＆＃34; {{{表示典型输出。

注意，帮助器的语法不像本机部分语法那样友好，您必须将当前上下文作为参数传递：

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

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

＆＃13;

＆＃13;

$(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"
      }
    )
  );

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

在外部文件中：

＆＃13;

＆＃13;

var fs = require('fs');

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

module.exports = exampleCode;

＆＃13;

＆＃13;

＆＃13;

app.js内：

＆＃13;

＆＃13;

// 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);
	});
});

＆＃13;

＆＃13;

＆＃13;

Answer 3

比较“藏匿”{{与“三重藏匿”{{{

  

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);
};

在express-handlebars注册：

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