使用Assemble从循环内部访问全局变量

时间:2013-05-26 18:43:50

标签: templates handlebars.js gruntjs assemble

使用Grunt.js 0.4和Assemble 0.3.78

如何从循环内部访问'page.filename'全局变量?

(调试)

<ul>
  {{#mysite.menu}}
    <li>{{page.filename}}</li>
  {{/mysite.menu}}
</ul>

(实际上) 建立一个菜单,尝试这个:

{{#mysite.menu}}
  <li {{#is page.filename url}} class="on" {{/is}}>{{name}}</li>
{{/mysite.menu}}

其中urlname是每个mysite.menu

的属性

1 个答案:

答案 0 :(得分:9)

获得比您提供的信息更多的信息会有所帮助,例如您正在使用的数据示例。但如果可以,我会尽力回答。为了澄清,pagefilename都是汇编中的内置“助手”/变量,filename是几个“路径”助手之一,以下是其他一些:

  • dirname :返回给定文件/目录的绝对路径。将返回:path/to/variables.md。用法:{{dirname [path]}}
  • pagename :返回给定文件的全名。将返回:variables.md。用法:{{filename "docs/toc.md"}}
  • 文件名:可以用作pagename的替代品。
  • basename :返回给定文件的基名。将返回:variables用法:{{base "docs/toc.md"}}
  • 扩展程序:返回给定文件的扩展名。将返回:.md用法:{{extension "docs/toc.md"}}
  • 分机:可以用作extension的替代品。
  • relative :返回从文件A到文件B的派生相对路径。用法:{{relative [from] [to]}}

这些可以与page一起使用,如下所示:

{{page.dest}}
{{page.absolute}}
{{page.dirname}}
{{page.filename}}
{{page.pagename}}
{{page.basename}}
{{page.extname}}
{{page.ext}}

或者,根据具体情况和需要:

{{this.dest}}
{{this.dirname}}
{{this.filename}}
{{this.pagename}}
{{this.basename}}
{{this.extname}}
{{this.ext}}

当您在示例中使用{{#each}}块内的模板时,您需要添加../以提升上下文级别:

{{../page.dest}}
{{../page.absolute}}
{{../page.dirname}}
{{../page.filename}}
{{../page.pagename}}
{{../page.basename}}
{{../page.extname}}
{{../page.ext}}

或者,再次取决于您网页上的其他内容。 (我不知道其他模板中有多少嵌套等等。)

{{../dest}}
{{../absolute}}
{{../dirname}}
{{../filename}}
{{../pagename}}
{{../basename}}
{{../extname}}
{{../ext}}

我的建议是,您只需将我列出的所有模板复制/粘贴到页面中并构建它。然后查看结果并查看哪些模板正在运行,它应该可以帮助您开始围绕模板的工作方式包装大脑。带把手的上下文一开始很混乱,但希望这会有所帮助。

此外,如果您在此之后仍然遇到麻烦,可以查看一些“汇编示例”回购并尝试让您的模板/页面首先构建而不用这些助手。然后提交你的工作并介绍帮助者,但不是一次只有一两个帮助者,当我学习时我开始向页面添加几十个助手,以加快查看发生的事情的过程在输出中,什么打破了,看看差异,看看有什么变化。等。

如果这至少让你到达某个地方,请告诉我。我很乐意继续帮忙。