handlebars - 从局部向视图头部添加内容
handlebars - add content to head of view from partial
我在我的项目中使用 express-handlebars
并遇到以下问题:
问题
我希望能够将 <script>
或这样的标签添加到我的整体视图头部,从视图内部调用的局部视图中。
示例:
风景
{{#layout/master}}
{{#*inline "head-block"}}
<script src="some/source/of/script">
{{/inline}}
...
{{>myPartial}}
{{/layout/master}}
视图正在扩展我用作布局的另一个部分 (layouts/master)。它通过内联部分符号将其内容添加到那个头部块,效果很好
部分"myPartial
<script src="another/script/src/bla"></script>
<h1> HELLO </h1>
现在我希望将其中的特定脚本标记添加到我的视图中 head-block。我尝试通过 @root
表示法,但只能在那里引用上下文。不改变任何东西。
我知道我可以使用 jquery 或类似的方法来通过引用文档标题等来添加内容。但我想知道这是否可以通过 Handlebars 实现。
我确实怀疑它在任何方面。但是,如果您有任何想法或建议,请按我的方式发送!非常感谢!!!
更新
如果您在布局/视图中注入了不止一种东西,这将不起作用。由于这种情况发生在浏览器加载页面时,它会产生某种竞争条件,帮助程序必须收集必须注入到父文件中的内容。如果它不够快,DOMTree 将在 helper 解析之前构建。所以总而言之,这个解决方案不是我所希望的。我会研究更多并尝试找到更好的...
这是我的做法。感谢 Marcel Wasilewski,他对 post 发表了评论并为我指明了正确的方向!
我使用了 handlebars-extend-block 助手。我没有安装这个包,因为它不直接与 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;
然后我要求将它们放入我的 express handlebars 实例中,如下所示:
let hbsInstance = exphbs.create({
extname: 'hbs',
helpers: require('../folder/toHelpers/helpersFile').helpers() ,
partialsDir: partialDirs
});
进入我的中央 layout/master
文件,该文件由我的部分视图扩展,并将其添加到其 <head>
部分
{{{block 'layout-partial-hook'}}}
(需要三个大括号,因为内容是 HTML。否则车把无法识别)
然后在部分本身中我添加了如下内容:
{{#extend "layout-partial-hook"}}
<link rel="stylesheet" href="/css/index.css"/>
{{/extend}}
成功了!谢谢!!!
我在我的项目中使用 express-handlebars
并遇到以下问题:
问题
我希望能够将 <script>
或这样的标签添加到我的整体视图头部,从视图内部调用的局部视图中。
示例:
风景
{{#layout/master}}
{{#*inline "head-block"}}
<script src="some/source/of/script">
{{/inline}}
...
{{>myPartial}}
{{/layout/master}}
视图正在扩展我用作布局的另一个部分 (layouts/master)。它通过内联部分符号将其内容添加到那个头部块,效果很好
部分"myPartial
<script src="another/script/src/bla"></script>
<h1> HELLO </h1>
现在我希望将其中的特定脚本标记添加到我的视图中 head-block。我尝试通过 @root
表示法,但只能在那里引用上下文。不改变任何东西。
我知道我可以使用 jquery 或类似的方法来通过引用文档标题等来添加内容。但我想知道这是否可以通过 Handlebars 实现。
我确实怀疑它在任何方面。但是,如果您有任何想法或建议,请按我的方式发送!非常感谢!!!
更新
如果您在布局/视图中注入了不止一种东西,这将不起作用。由于这种情况发生在浏览器加载页面时,它会产生某种竞争条件,帮助程序必须收集必须注入到父文件中的内容。如果它不够快,DOMTree 将在 helper 解析之前构建。所以总而言之,这个解决方案不是我所希望的。我会研究更多并尝试找到更好的...
这是我的做法。感谢 Marcel Wasilewski,他对 post 发表了评论并为我指明了正确的方向!
我使用了 handlebars-extend-block 助手。我没有安装这个包,因为它不直接与 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;
然后我要求将它们放入我的 express handlebars 实例中,如下所示:
let hbsInstance = exphbs.create({
extname: 'hbs',
helpers: require('../folder/toHelpers/helpersFile').helpers() ,
partialsDir: partialDirs
});
进入我的中央 layout/master
文件,该文件由我的部分视图扩展,并将其添加到其 <head>
部分
{{{block 'layout-partial-hook'}}}
(需要三个大括号,因为内容是 HTML。否则车把无法识别)
然后在部分本身中我添加了如下内容:
{{#extend "layout-partial-hook"}}
<link rel="stylesheet" href="/css/index.css"/>
{{/extend}}
成功了!谢谢!!!