I have a detail page template, which gets its page content data from a JavaScript file that connects to a service. This works all fine, my pages get generated. However, I try to use the slug filter in the YAML section for the permalink, and I want to pass the title to the title field, to be used in my layout for
.</p>
<pre><code class="prettyprint">layout: page
tags: ["detail"]
pagination:
data: products.results
size: 1
alias: detail
addAllPagesToCollections: true
renderData:
title: {{detail.item.title}}
permalink: "detail/{{ detail.item.id }}/{{detail.item.title slug}}/"
title: "{{renderData.title}}"
---
</code></pre>
<p>I followed the description given by others for this issues, but I'm stuck here. I really can't figure this out. I get this in my title.<br />
<code>[object Object]</code></p>
<p>SOLVED: And I get this error when using the slug filter in permalink I know this error is coming from Handlebars, but it says "helperMissing".</p>
<pre><code class="prettyprint">TypeError: (((intermediate value)(intermediate value) && stack1.title) || container.hooks.helperMissing).call is not a function
[2] at Object.eval [as main] (eval at createFunctionContext (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:266:23), <anonymous>:6:150)
[2] at main (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\node_modules\handlebars\dist\cjs\handlebars\runtime.js:176:32)
[2] at ret (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\node_modules\handlebars\dist\cjs\handlebars\runtime.js:179:12)
[2] at ret (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\node_modules\handlebars\dist\cjs\handlebars\compiler\compiler.js:515:21)
[2] at C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\src\Engines\Handlebars.js:61:14
[2] at Template.render (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\src\TemplateContent.js:182:28)
[2] at async Template._getLink (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\src\Template.js:103:26)
[2] at async Template.getOutputLink (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\src\Template.js:133:16)
[2] at async Pagination.getPageTemplates (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\src\Plugins\Pagination.js:242:25)
[2] at async Template.getTemplates (C:\Projects\StaticSiteRepo\Static Site Repo\node_modules\@11ty\eleventy\src\Template.js:428:23)
</code></pre>
<p>The slug filter is by default loaded, right?</p>
<p>EXTRA: Is it also possible to link to these generated pages via an object? I know there's the collections.detail which I could use, but I seem not be able to access it in an other template except for a file in the root.</p>
<p>Thanks.</p>
</div>
<div>
<span class="badge badge-primary">duplicate</span>
<span class="badge badge-primary">education</span>
<div class="float-right">
<a class="text-muted" href="https://www.github.com/11ty/eleventy/issues/912" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars1.githubusercontent.com/u/8914004?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
<strong>BregtDeLange</strong>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="ph-above-best-comment"> </div>
</div>
<div class="col-12 mb-4 best-comment">
<div>
<h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2>
</div>
<div class="card card-custom border-lg-success mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p><code>renderData</code> still works (and actually received bug fixes) in 0.11.0 but will probably go away in 1.0. Computed Data is the way to go in the futureāthanks!</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars2.githubusercontent.com/u/39355?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
<strong>zachleat</strong>
<span class="text-muted ml-1">on 11 May 2020</span>
</div>
<div class="col text-right">
👍<span class="ml-2 mr-3">2</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="mb-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="9295564578"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12 d-flex align-items-center mb-4">
<h2>All 5 comments</h2>
</div>
<div class="col-12">
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>Regarding the slug issue: I had to put the slug filter in front of my data. Sorry about that. Facepalm.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars1.githubusercontent.com/u/8914004?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="BregtDeLange picture">
<strong>BregtDeLange</strong>
<span class="text-muted ml-1">on 7 Feb 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>Okay, found out myself. Here's my solution. Took me a while. I know the renderData is not documented and read about the reason. Is there anything similarly coming up in a next version of Eleventy? WHen working with JavaScript data files, this is a must have.</p>
<pre><code class="prettyprint">layout: page
tags: ["detail"]
pagination:
data: products.products.results
size: 1
alias: detail
addAllPagesToCollections: true
renderData:
title: "{{detail.item.title}}"
id: "{{detail.item.id}}"
permalink: "detail/{{ detail.item.id }}/{{slug detail.item.title}}/"
title: {{{this.renderData.title}}}
id: {{{this.renderData.id}}}
---
</code></pre>
<p>And to link to a generated page</p>
<pre><code class="prettyprint">{{#each @root.collections.detail}}
{{#eq ../item.id this.data.renderData.id}}
<a href="{{this.url}}">More info</a>
{{/eq}}
{{/each}}
</code></pre>
<p>However the slug function doesn't solve complex characters. I have Ć© and Ć in my titles, which I generated pages from, and linking this through the collections object (this.url), sometimes breaks the url.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars1.githubusercontent.com/u/8914004?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="BregtDeLange picture">
<strong>BregtDeLange</strong>
<span class="text-muted ml-1">on 9 Feb 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>It is! Iām going to close this as a duplicate of #481, which is coming very soon. Is that okay?</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars2.githubusercontent.com/u/39355?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zachleat picture">
<strong>zachleat</strong>
<span class="text-muted ml-1">on 19 Feb 2020</span>
</div>
<div class="col text-right">
👍<span class="ml-2 mr-3">1</span>
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p><strong>@BregtDeLange</strong> Head's up!<br />
If I got the news right, <code>renderData</code> is deprecated in 0.11. (Currently in beta).<br />
So some changes will be needed to consume the new option of ācomputed dataā.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/3097194?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Ryuno-Ki picture">
<strong>Ryuno-Ki</strong>
<span class="text-muted ml-1">on 5 Mar 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p><code>renderData</code> still works (and actually received bug fixes) in 0.11.0 but will probably go away in 1.0. Computed Data is the way to go in the futureāthanks!</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars2.githubusercontent.com/u/39355?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zachleat picture">
<strong>zachleat</strong>
<span class="text-muted ml-1">on 11 May 2020</span>
</div>
<div class="col text-right">
👍<span class="ml-2 mr-3">2</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown text-center helpful">
<div class="title">Was this page helpful?</div>
<div class="mt-1" onMouseLeave="rating(561524506, 0);">
<i class="fas fa-star inactive" id="star-1" onMouseOver="rating(561524506, 1);" onclick="rate(561524506, 1);"></i>
<i class="fas fa-star inactive" id="star-2" onMouseOver="rating(561524506, 2);" onclick="rate(561524506, 2);"></i>
<i class="fas fa-star inactive" id="star-3" onMouseOver="rating(561524506, 3);" onclick="rate(561524506, 3);"></i>
<i class="fas fa-star inactive" id="star-4" onMouseOver="rating(561524506, 4);" onclick="rate(561524506, 4);"></i>
<i class="fas fa-star inactive" id="star-5" onMouseOver="rating(561524506, 5);" onclick="rate(561524506, 5);"></i>
</div>
<div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div>
</div>
</div>
<div class="mb-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3452512275"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div id="ph-above-related"></div>
<div class="card card-custom issue-box">
<div class="card-body pt-3 pb-5">
<h2 class="mb-4">Related issues</h2>
<div>
<strong>
<a href="/eleventy/576887496/can-you-query-a-post-tag-from-a-template">Can you query a post tag from a template?</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars0.githubusercontent.com/u/5744600?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="aaronstezycki picture">
<strong class="pr-1" dir="ltr">aaronstezycki</strong>
Ā·
<span class="px-1" dir="ltr">3</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/eleventy/526259753/how-do-i-read-from-a-env-file">How do I read from a .env file?</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars1.githubusercontent.com/u/596770?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="michrome picture">
<strong class="pr-1" dir="ltr">michrome</strong>
Ā·
<span class="px-1" dir="ltr">3</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/eleventy/466373746/use-liquid-tags-variables-in-external-css-js-files">Use Liquid tags/variables in external CSS & JS files</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars2.githubusercontent.com/u/15710530?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zac-heisey picture">
<strong class="pr-1" dir="ltr">zac-heisey</strong>
Ā·
<span class="px-1" dir="ltr">3</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/eleventy/433055450/feature-request-treat-any-11tydata-js-file-as-a-directory">Feature request: Treat any *.11tydata.js file as a directory data file.</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars0.githubusercontent.com/u/1066253?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="robdodson picture">
<strong class="pr-1" dir="ltr">robdodson</strong>
Ā·
<span class="px-1" dir="ltr">3</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/eleventy/391461976/template-error-using-shortcodes">Template error using shortcodes</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars3.githubusercontent.com/u/6732058?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kaloja picture">
<strong class="pr-1" dir="ltr">kaloja</strong>
Ā·
<span class="px-1" dir="ltr">3</span><span>Comments</span>
</div>
</div>
</div>
<div class="sticky-top pt-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3919948963"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="ph-below-related-2" class="mt-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3919948963"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
</div>
</div>
<div class="skyscraper-container">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="7879185320"
data-ad-format="vertical"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="mt-5 spacer"></div>
<footer class="mt-5 pb-2 py-4 text-center mt-auto">
<div class="container">
<a class="navbar-brand logo mr-5" href="/">
<img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo">
bleeping<strong>coder</strong>
</a>
<div class="mt-4">
bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div>
<div>
Source for this page: <a href="https://www.github.com/11ty/eleventy/issues/912" rel="nofollow noreferrer" target="_blank">Source</a>
</div>
</div>
<hr class="mb-5 mt-5">
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg mb-sm-0 mb-5">
<strong>Popular programming languages</strong>
<ul class="list-unstyled mb-0 mt-2">
<li class="mb-2">
<a href="/python" dir="ltr">Python</a>
</li>
<li class="mb-2">
<a href="/javascript" dir="ltr">JavaScript</a>
</li>
<li class="mb-2">
<a href="/typescript" dir="ltr">TypeScript</a>
</li>
<li class="mb-2">
<a href="/cpp" dir="ltr">C++</a>
</li>
<li class="mb-2">
<a href="/csharp" dir="ltr">C#</a>
</li>
</ul>
</div>
<div class="col-sm-4 col-lg mb-sm-0 mb-5">
<strong>Popular GitHub projects</strong>
<ul class="list-unstyled mb-0 mt-2">
<li class="mb-2">
<a href="/microsoft/vscode" dir="ltr">vscode</a>
</li>
<li class="mb-2">
<a href="/numpy/numpy" dir="ltr">numpy</a>
</li>
<li class="mb-2">
<a href="/ant-design/ant-design" dir="ltr">ant-design</a>
</li>
<li class="mb-2">
<a href="/mui-org/material-ui" dir="ltr">material-ui</a>
</li>
<li class="mb-2">
<a href="/vercel/next-js" dir="ltr">next.js</a>
</li>
</ul>
</div>
<div class="col-sm-4 col-lg mb-0">
<strong>More GitHub projects</strong>
<ul class="list-unstyled mb-0 mt-2">
<li class="mb-2">
<a href="/rust-lang/rust" dir="ltr">rust</a>
</li>
<li class="mb-2">
<a href="/moment/moment" dir="ltr">moment</a>
</li>
<li class="mb-2">
<a href="/yarnpkg/yarn" dir="ltr">yarn</a>
</li>
<li class="mb-2">
<a href="/mozilla/pdf-js" dir="ltr">pdf.js</a>
</li>
<li class="mb-2">
<a href="/JuliaLang/julia" dir="ltr">julia</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="mb-5 mt-5">
<div class="container text-muted">
Ā© 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br />
By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>.
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>-->
<script type="text/javascript" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body>
</html>