Geek Answers Handbook

Pens: transferring information from page to another page via href

Let's say in Handlebars this is 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}}

The data is as follows:

 {"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 make a single card simply:

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

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

Thanks!

+7
partial
source share
2 answers

After creating a partial with Handlebars.registerPartial you can include it in the template as follows:

 {{> cardSingle }}

This syntax also takes an object parameter:

 {{> cardSingle objectOfThings }}

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

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

And your partial cardSingle can directly use this properties:

 <h4>{{title}}</h4>
+4
source share

So basically you have a partial cards-list.html that you need to include in your card-single.html . Why do you need to first register your partial ( cards-list in the example below) using Handlebars.registerPartial .

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

I created the file 'main.js' for this.

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.

map-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 "card-list.html" provided by you.

maps-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 when I use mac, I just need to go to the directory and run the python -m SimpleHTTPServer 8000 to start the server. (For windows we can use apache tomcat server).

After that, just access the file in the browser with the URL http://0.0.0.0:8000/card-single.html .

GITHUB link . Hope this helps.

0
source share

More articles:


All Articles