Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Handlebars.js & WordPress Templates - Home
<?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(); ?>
@jchristopher

This comment has been minimized.

Copy link
Owner Author

@jchristopher jchristopher commented Feb 27, 2012

This gist is referenced in its parent article

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment