车把内的渲染模板

问题描述 投票:10回答:2

因为似乎没有答案:Passing variables through handlebars partial,但我目前正在研究一种解决方法,以完成这项工作。因此,其想法是注册一个帮助程序功能,该功能使用可能的值呈现特定的模板。一点点的代码可以更好地理解。

这是我调用助手的方式:

<div>
    {{myHelper}}
</div>

此帮助程序已使用此小代码注册:

hbs.registerHelper(name, function (args) {
    args = args || {};
    var template = hbs.compile(fs.readFileSync(__dirname + '/' + file, 'utf8'));
    return template(args);
});

我将此代码片段放入循环中以立即注册不同的助手。这意味着给出了“名称”和“文件”。

现在我可以执行以下操作:

// 'values' could be something like this:

var values = { headline: 'HEADLINE' }

<div>
    {{myHelper values}}
</div>

现在可以在帮助器中测试是否给出了特定值:

// myHelper template

<div>
    {{#if headline}}
    <h1>{{headline}}</h1>
    {{/if}}
    <p>Lorem ipsum</p>
</div>

这个小解决方法对我有用,但是有一个问题。如上所述注册一个助手,返回一个纯HTML转义字符串。因此,调用帮助程序不会输出呈现的HTML代码段。它将HTML输出为转义的字符串。

你们中的每个人都知道如何让我的代码片段将HTML转换为HTML吗?

/帕斯卡

html handlebars.js rendering helper templating
2个回答
21
投票

来自Handlebars doc

[Handlebars不会转义Handlebars.SafeString。如果您编写一个生成自己的HTML的帮助程序,通常 想要返回一个新的Handlebars.SafeString(result)。在这样的 在这种情况下,您将需要手动转义参数。

尝试

hbs.registerHelper(name, function (args) {
    args = args || {};
    var template = hbs.compile(fs.readFileSync(__dirname + '/' + file, 'utf8'));

    // return new hbs.SafeString(template(args));
    // From @Maroshii 
    // the SafeString method must be accessed through hbs.handlebars 
    // and not directly through hbs
    // https://github.com/donpark/hbs#handlebars

    return new hbs.handlebars.SafeString(template(args));
});

27
投票

我想指出的是,使用三括号消除了运行任何其他方法转换为HTML的需要。例如,访问模板数据时,只需使用三个大括号{{{templateData}}},即可获取原始HTML。

© www.soinside.com 2019 - 2024. All rights reserved.