Login/Register
Handlebars: transfer information from a page to another page via href
Asked Answered
handlebars.jspartial
G

2

6

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!

Glutamate answered 27/2, 2018 at 16:43 Comment(0)
B
4

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>
Baxter answered 1/3, 2018 at 20:8 Comment(4)
I think you've misunderstood my question. "card-single.html" - as you can see from data - is the "view" to which you access via the href link, so it is not a child of the parent view and you can't pass the context via object parameter... – Glutamate
@Glutamate Perhaps. Are you trying to transfer information from page to page? I think we're having a hard time understanding. – Baxter
exactly, I would to transfer information from page to page, now I'll edit the question title... – Glutamate
Handlebars is made to place JS data into HTML templates, period, so there's not a "Handlebarsy" way to do this like I think you're wanting. You'll need to create a way to (1) Send data through your link, (2) receive the data in JS on the other side, then (3) Plug it into Handlebars. Explaining how to do that completely is outside the scope of Stack Overflow, but as a hint, you'll probably want to send your data through the link over GET query parameters. – Baxter
A
0

So, basically you have the partial cards-list.html which you need to include inside your card-single.html. For which, you need to first register your partial (cards-list in the below example) using Handlebars.registerPartial.

The challenge here is, as your partial is in a separate file, you need run your application in a server (to allow Cross origin) and use the jQuery get function to access it and then register the partial.

I have created a 'main.js' file for the same.

main.js

$(document).ready(function() {
  var template = Handlebars.compile($("#base-template").html());
  $.get('cards-list.html').done(function(text) { //Accessing cards-list.html
    Handlebars.registerPartial('cards-list', text); //Registering the partial in the name of `cards-list`
    /* Setting the JSON data here*/
    var context = {
      "data": [
        {
          "id": "1",
          "title": "A",
          "img": "imga.jpg",
          "url": "card-single.html"
        },
        {
          "id": "2",
          "title": "B",
          "img": "imgb.jpg",
          "url": "card-single.html"
        }
      ]
    };
    $('#results').html(template(context)); //Rendering the result in the webpage
  });
});

And my 'card-single.html' looks like this.

card-single.html

<html>
<head>
  <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <!-- Includes jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> <!-- Includes Handlebars.js -->
  <script src="main.js"></script> <!-- Includes main.js -->
</head>
<body>
  <div id="results">
    <script id="base-template" type="text/x-handlebars-template">
      <article class="card card_single-view">
        <h4>{{title}}</h4> <!-- This won't print anything unless in an each loop or use {{data.[0].title}} instead-->
        {{> cards-list}} <!-- Calling the partial -->
      </article>
    </script>
  </div>
</body>
</html>

And finally the 'cards-list.html' provided by you.

cards-list.html

{{#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}}

All these 3 files are in the same directory and as I'm using a mac, I just need to navigate to the directory and run the command python -m SimpleHTTPServer 8000 to start the server. (For windows we may use an apache tomcat server).

After which, simply access the file in a browser with the url http://0.0.0.0:8000/card-single.html.

GITHUB link. Hope this helps.

Ammon answered 7/3, 2018 at 10:17 Comment(2)
I think you've misunderstood my question. "card-single.html" - as you can see from data - is the "single view" to which you access via the href link and in which you can view only the data of a single card - not the cards list loop.... – Glutamate
Could you please specify how your desired output would look like? – Ammon

© 2022 - 2024 — McMap. All rights reserved.