node.js - Handlebars - 将内容从部分添加到 View 头部

标签 node.js handlebars.js partials express-handlebars

我正在使用express-handlebars在我的项目中存在以下问题:

问题 我希望能够添加<script>从 View 内部调用的部分将此类标签添加到我的整体 View 头部。

示例:

景色

{{#layout/master}}
{{#*inline "head-block"}}
<script src="some/source/of/script">
{{/inline}}
...
{{>myPartial}}
{{/layout/master}}

该 View 正在扩展我用作布局的另一个部分(布局/主)。它通过内联部分符号将其内容添加到该头部 block ,效果很好

部分“myPartial

<script src="another/script/src/bla"></script>

<h1> HELLO </h1>

现在我希望将其中的特定脚本标记添加到我的 View 头 block 中。我尝试通过 @root符号,但只能引用那里的上下文。不改变任何东西。

我知道我可以使用 jquery 或类似的方法来通过引用文档头等来添加内容。但我想知道这是否可以通过 Handlebars 实现。

我确实怀疑这是在任何方面。但如果您有任何想法或建议,请发送给我!非常感谢!!!

最佳答案

更新

如果您在布局/ View 中注入(inject)了不止一件东西,这将不起作用。由于这种情况发生在浏览器加载页面时,它会创建某种竞争条件,帮助程序必须收集必须注入(inject)到父文件中的内容。如果速度不够快,DOMTree 将在助手解析之前构建。总而言之,这个解决方案不是我所希望的。我会进行更多研究并尝试找到更好的...

<小时/>

这是我的做法。感谢 Marcel Wasilewski 对这篇文章发表评论并为我指出了正确的事情!

我使用了handlebars-extend-block helper 。我没有安装该软件包,因为它与 express-handlebars 不兼容直接(免责声明:有一个包说它是,但它只为我抛出错误) 所以我只是使用了他定义的助手,从 github 复制它们(我当然链接到他的存储库并归功于他!),如下所示:

var helpers = function() {

// ALL CREDIT FOR THIS CODE GOES TO: 
// https://www.npmjs.com/package/handlebars-extend-block
// https://github.com/defunctzombie/handlebars-extend-block

var blocks = Object.create(null);

return {

    extend: function (name,context) {
        var block = blocks[name];
        if (!block) {
            block = blocks[name] = [];
        }

        block.push(context.fn(this));
    },
    block: function (name) {
        var val = (blocks[name] || []).join('\n');

        // clear the block
        blocks[name] = [];
        return val;
    }
}
};
module.exports.helpers = helpers;    

然后我需要将它们放入我的快速 Handlebars 实例中,如下所示:

let hbsInstance = exphbs.create({
        extname: 'hbs',
        helpers: require('../folder/toHelpers/helpersFile').helpers() ,
        partialsDir: partialDirs
    });

进入我的中央layout/master由我的 View Partial 扩展的文件并将其添加到其 <head>部分

{{{block 'layout-partial-hook'}}}

(三大括号是必需的,因为内容是 HTML。否则 Handlebars 将无法识别)

然后在部分本身中我添加了如下内容:

{{#extend "layout-partial-hook"}}
    <link rel="stylesheet" href="/css/index.css"/>
{{/extend}}

这就成功了!谢谢!!!

关于node.js - Handlebars - 将内容从部分添加到 View 头部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53283448/

相关文章:

javascript - Ember,如何为 "partial"和 "index"重用相同的 "show"

ruby-on-rails - VB .NET 中有 Rails partials 的类似物吗?

node.js - 具有分层的 Node.js 配置文件

node.js - 如何确定对象是否存在 AWS S3 Node.JS sdk

handlebars.js - 检查 Handlebars 助手是否已经存在?

javascript - Handlebars 在辅助输出上附加 'undefined'

javascript - 我可以使用 HummuJS 修改现有 PDF 文件中的框吗?

javascript - 从 inquirer.js 菜单运行 protractor.js 测试

javascript - 动态渲染模板,无需重新加载页面

ruby-on-rails - 在 Ruby on Rails 部分中渲染 React 组件