Handlebars Wordpress Demo

handlebars-wordpress-demo.markdown

Handlebars Wordpress Demo

A Pen by Carlos Araya on CodePen.

License.

index.html

<div id="myContent"></div>

<template id="posts-list-template">
  {{#each posts}}
    <div class="post">
      <h1>{{title}}</h1>
      <div>
        {{content.renderes}}
      </div>
    </div>
  {{/each}}
</template>

script.js

// https://wpdev.rivendellweb.net/wp-json/wp/v2/posts?per_page=10
let myPosts = fetch('https://wpdev.rivendellweb.net/wp-json/wp/v2/posts?per_page=4')
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(myJson);
  })
  .catch((err) => {
    console.log('There\'s been an error getting the data', err);
  });


let template = document.getElementById('posts-list-template').innerHTML;
let renderPosts = Handlebars.compile(template);
document.getElementById('myContent').innerHTML = renderPosts({
  posts: myPosts
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>