次の JSON と handlebars.js テンプレートがあるとします。
JSON
{
rootPath: '/some/path/',
items:[ {
title: 'Hello World',
href: 'hello-world'
}, {
title: 'About',
href: 'about'
}, {
title: 'Latest News',
href: 'latest-news'
}
}
テンプレート
<script id="test-template" type="text/x-handlebars-template">
<ul class="nav">
{{#each items}}
<li><a href="{{../rootPath}}{{href}}">{{title}}</a></li>
{{/each}}
</ul>
</script>
上記のテンプレートは、アイテムをフィルター処理するまで機能します。奇数リストと偶数リストの 2 つのリストがあるとします。
<script id="test-template" type="text/x-handlebars-template">
<ul class="nav">
{{#each items}}
{{#isOdd @index}}
<li><a href="{{../rootPath}}{{href}}">{{title}}</a></li>
{{/isOdd}}
{{/each}}
</ul>
</script>
そして登録されたヘルパー:
// isOdd, helper to identify Odd items
Handlebars.registerHelper('isOdd', function (rawValue, options) {
if (+rawValue % 2) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
ヘルパーは期待どおりに機能し、Odd アイテムのみがレンダリングされますが、親コンテキストへの参照が失われるため、{{../rootPath}}
ディレクティブ ~~fails to render~~ は空の値をレンダリングします。
ブロック ヘルパーを介して親コンテキストを渡す方法はありますか?