CODEWITHSUNDEEP
handlebars.jspartial
AmintaCode
AmintaCode

Reputation: 364

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

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!

Upvotes: 6

Views: 2927

Answers (2)

Gibin Ealias
Gibin Ealias

Reputation: 2859

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.

Upvotes: 0

Litty
Litty

Reputation: 1876

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>

Upvotes: 4

Related Questions