child-theme-scripts-v1.php

<?php

add_action( 'wp_enqueue_scripts', function(){
	wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
	wp_register_script( 'handlebarsjs', '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js' );
	wp_enqueue_script( 'theme', get_stylesheet_directory_uri() . '/theme.js', array( 'jquery','handlebarsjs' )  );
	$post_data = example_rest_theme_get_posts( get_query_var( 'page', 1 ) );
	wp_localize_script( 'theme', 'EX_THEME', $post_data  );
});

example_rest_theme_get_posts-v1.php

<?php
/**
 * Get REST API response for posts
 *
 * @param int $page
 *
 * @return array
 */
function example_rest_theme_get_posts( $page = 1 ){
	$controller = new WP_REST_Posts_Controller( 'post' );
	$request = new WP_REST_Request('', '', array(
		'page' => 1
	));
	$items = $controller->get_items($request );
	return array(
		'posts' => rest_ensure_response( $items )->get_data()
	);

}

example_rest_theme_get_posts-v2.php

<?php

/**
 * Get REST API response for posts with pagination info
 *
 * @param int $page
 *
 * @return array
 */
function example_rest_theme_get_posts( $page = 1 ){
	$controller = new WP_REST_Posts_Controller( 'post' );
	$request = new WP_REST_Request('', '', array(
		'page' => 1
	));
	$items = $controller->get_items($request );
	$response = rest_ensure_response( $items );
	$headers = $response->get_headers();
	return array(
		'api'   => rest_url( 'wp/v2/posts' ),
		'page'  => $page,
		'pages' => $headers[ 'X-WP-TotalPages' ],
		'posts' => $response->get_data()
	);

}

pagination-template.html

	<script id="pagination-template" type="text/x-handlebars-template">
		<nav class="navigation " role="navigation" id="post-pagination">
			{{#if hasMore }}
				<a href="#main"  id="nav-next">Next</a>
			{{/if}}
			{{#if hasLess }}
				<a href="#main" id="nav-previous">Previous</a>
			{{/if}}
		</nav>
	</script>

template.html

	<script id="entry-template" type="text/x-handlebars-template">
		<article id="post-{{id}}" class="post-{{id}} post type-post status-publish ">
			<header class="entry-header">
				<h2 class="entry-title"><a href="{{link}}" rel="bookmark">{{title.rendered}}</a></h2>
			</header>
			<div class="entry-content">
				{{{content.rendered}}}
			</div>
		</article>
	</script>

theme-v1.js

jQuery(function($) {
    if( 'object' == typeof  EX_THEME && 'undefined' != EX_THEME.posts ){
        var posts = EX_THEME.posts,
            template = Handlebars.compile($('#entry-template').html()),
            $main = $( '#main' );
        $.each( posts, function( i, post ){
            $main.append( template(post) );
        });

    }

});

theme-v2.js

jQuery(function($) {
    if( 'object' == typeof  EX_THEME && 'undefined' != EX_THEME.posts ){
        var posts = EX_THEME.posts,
            template = Handlebars.compile($('#entry-template').html()),
            paginationTemplate = Handlebars.compile($('#pagination-template').html()),
            $main = $( '#main' ),
            pages = parseInt( EX_THEME.pages ),
            page = parseInt( EX_THEME.page );
        $.each( posts, function( i, post ){
            $main.append( template(post) );
        });

        pagination( pages );

        function pagination(  pages) {
            var hasMore, hasLess;
            if( page > 1 ){
                hasLess = true;
            }
            if( pages > page ){
                hasMore = true;
            }

            var pagination = {
                hasMore: hasMore,
                hasLess: hasLess
            };

            $main.append(paginationTemplate(pagination));

            $( '#nav-next' ).on(  'click', function(){
                page++;
                getPosts();
            });

            $(  '#nav-previous'  ).on(  'click', function(){
                page--;
                getPosts();
            });
        }

    }

});

theme-v3.js

jQuery(function($) {
    if( 'object' == typeof  EX_THEME && 'undefined' != EX_THEME.posts ){
        var posts = EX_THEME.posts,
            template = Handlebars.compile($('#entry-template').html()),
            paginationTemplate = Handlebars.compile($('#pagination-template').html()),
            $main = $( '#main' ),
            pages = parseInt( EX_THEME.pages ),
            page = parseInt( EX_THEME.page );
        $.each( posts, function( i, post ){
            $main.append( template(post) );
        });

        pagination( pages );

        function pagination(  pages) {
            var hasMore, hasLess;
            if( page > 1 ){
                hasLess = true;
            }
            if( pages > page ){
                hasMore = true;
            }

            var pagination = {
                hasMore: hasMore,
                hasLess: hasLess
            };

            $main.append(paginationTemplate(pagination));

            $( '#nav-next' ).on(  'click', function(){
                page++;
                getPosts();
            });

            $(  '#nav-previous'  ).on(  'click', function(){
                page--;
                getPosts();
            });
        }




        function getPosts(){
            $.get( EX_THEME.api + '?page='+ page ).done( function(posts,status,xhr ){
                var pages = xhr.getResponseHeader( 'X-WP-TotalPages' );
                $main.empty();
                $.each( posts, function( i, post ){
                    $main.append( template(post) );
                });
                pagination( pages );
            });
        }

    }

});