Handlebars.js & WordPress Templates - Home

home.php

<?php

/* Template Name: Home */

global $post;
global $handlebars;

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'handlebars',
  get_bloginfo( 'stylesheet_directory' ) . '/js/handlebars.js',
  null,
  null,
  false );

the_post();
get_header();

?>

<div id="primary">
  <div id="content" role="main">

    <h1 class="entry-title"><?php the_title(); ?></h1>

    <?php the_content(); ?>

    <?php
        $args = array(
            'post_type'      => 'page',
            'post_parent'    => 5,
            'posts_per_page' => 1,
            'order'          => 'rand'
          );

        $team = new WP_Query( $args );

        $team->the_post();
    ?>

    <div class="team-spotlight entry-content">
      <h2>Team Member Spotlight</h2>
      <div id="team-member">
        <?php get_template_part( 'team', 'member-spotlight' ); ?>
      </div>
      <p><a id="team-member-refresh" href="#">Refresh</a></p>
    </div>

    <script type="text/javascript">
      var CURRENT_MEMBER_ID = <?php echo $post->ID; ?>;
    </script>

    <?php wp_reset_postdata(); ?>

  </div>
</div>

<!-- Our Mustache Template -->
<script id="team-member-spotlight-template" type="text/x-handlebars-template">
  <?php $handlebars = true; get_template_part( 'team', 'member-spotlight' ); ?>
</script>

<!-- Our click handler -->
<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('a#team-member-refresh').click(function(e){
      e.preventDefault();
      // the first step is to make our ajax request
      jQuery.post('<?php echo get_permalink( 5 ); ?>',
        {
          ajax: true,
          current: CURRENT_MEMBER_ID
        },
        function(data){
          data = jQuery.parseJSON(data);
          CURRENT_MEMBER_ID = data.id;  // store for future refreshes
          // on success, we can make use of our Handlebars template
          var source   = jQuery('#team-member-spotlight-template').html();
          var template = Handlebars.compile(source);
          jQuery('#team-member').html(template(data));
        }
      );
    });
  });
</script>

<?php get_footer(); ?>

This gist is referenced in its parent article