Handlebars: transfer information from a page to another page via href

Question

Let's say in Handlebars we have this cards-list.html partial:

{{#each data}}

<article class="card card_list-view card_list-view--regular">
<picture class="card-image">
    <img src="{{root}}/assets/img/{{this.img}}" alt="">
</picture>
<section class="card-section">
    <header>
        <h3><a href="{{this.url}}">{{this.title}}</a></h3>
    </header>
</section>
</article>

{{/each}}

Data are like this:

{"id": "1", 
 "title": "A",
 "img": "imga.jpg",
 "url": "card-single.html"
},
{"id": "2", 
 "title": "B",
 "img": "imgb.jpg",
 "url": "card-single.html"
}

And - in card-single.html - I would like to render the single card simply with:

<article class="card card_single-view">
  <h4>{{title}}</h4}
  [etc..]

How can I pass, via href attribute or in another way, the original context of cards-list.html partial to card-single.html?

Thanks!

Answer 1

After creating a partial with Handlebars.registerPartial you can include it in a template like so:

{{> cardSingle }}

This syntax also accepts an object parameter:

{{> cardSingle objectOfThings }}

So in your cards-list.html you could have something like:

{{#each data}}
    {{> cardSingle this }}
{{/each}}

And your cardSingle partial could use the properties of this directly:

<h4>{{title}}</h4>