Handlebars Precompile Error
A handlebars precompile error from: http://jsfiddle.net/windix/qv2Kf/
by amindunited
HTML
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars.runtime-1.0.0.beta.6"></script>
<!-- SOF Template For Part 2: basic handlebars usage -->
<script id="allTweets_Template_basic" type="text/x-handlebars">
<ul class="tweeters">
<li>
{{#tweeters}}
<ul class="tweeter">
{{#tweeter}}
<li class="tweet">
<div class="time"><i>{{created_at}}</i></div>
{{text}}<br>
</li>
{{/tweeter}}
</ul>
{{/tweeters}}
</li>
</ul>
</script>
<!-- EOF Template For Part 2: basic handlebars usage -->
<!-- SOF Template For Part 3: handlebars helpers -->
<script id="allTweets_Template" type="text/x-handlebars">
<ul class="tweeters">
<li>
{{#tweeters}}
<ul class="tweeter">
{{#tweeter}}
{{#firstChild ../tweeter}}<div class="full_name"><h1>{{user.name}}</h1></div>{{else}} {{/firstChild}}
<li class="tweet">
<div class="time"><i>{{created_at}}</i></div>
{{text}}<br>
</li>
{{/tweeter}}
</ul>
{{/tweeters}}
</li>
</ul>
</script>
<!-- EOF Template For Part 3: handlebars helpers -->
<script type="text/javascript">
(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['step2'] = template(function (Handlebars,depth0,helpers,partials,data) {
helpers = helpers || Handlebars.helpers;
var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression, self=this, blockHelperMissing=helpers.blockHelperMissing;
function program1(depth0,data) {
var buffer = "", stack1, foundHelper;
buffer += "\n <ul class=\"tweeter\">\n ";
foundHelper = helpers.tweeter;
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{},inverse:self.noop,fn:self.program(2, program2, data)}); }
else { stack1 = depth0.tweeter; stack1 = typeof stack1...
CSS
h1 {
font-weight:bold;
font-size:2em;
padding:5px;
color:#FFFFFF;
}
.tweeters{
padding:5px;
padding-bottom:0px;
padding-top:0px;
width:300px;
margin-left:auto;
margin-right:auto;
}
.tweeter {
width:300px;
background:#3D668F;
}
.full_name { background:#3D668F url(http://jsfiddle.net/img/top-bg.png) repeat-x;}
.tweet {
padding:5px;
padding-top: 10px;
margin:1px;
margin-right:2px;
margin-left:2px;
background-color:#dedede;
color:#000000;
}
.tweet:nth-child(odd){
background-color:#efefef;
color:#333333;
}
.tweet:last-child{margin-bottom:0px;}
.time {
font-size: 0.75em;
margin-bottom: 5px;
}
JavaScript
//set this to change the result based on what section of the example you are on
var current_part = 3;
////////////////////////////////////////////////////////////////////////////////
// SOF Part 01
/**
* Here we request the data that we will use..
* pretty standard JSON request using JQUERY
* (not really handlebars stuff)
*/
// Set current_part to 1!!!
/**
* SOF DATA REQUEST
*/
// Write out the raw response data
function draw_raw () {
$('<pre></pre>')
.html(JSON.stringify(allTweets))
.appendTo('#allTweets_Placeholder')
.css({'word-wrap':'break-word'});
}
// Create an array of twitter account objects
// (later we will grab the accounts from accounts.twitter)
var accounts = [{'name': {'first':'Rasmus','last':'Lerdorf'},'twitter': 'rasmus'},
{'name': {'first':'Bill','last':'Gates'},'twitter': 'BillGates'},
{'name': {'first':'John','last':'Resig'},'twitter': 'jeresig'}];
// This will hold the data that we will use with handlebars
// I've created a containing object to make it easier to iterate...
// (it's kind of annoying to have an array as the root element in handlebars)
var allTweets = {}
allTweets.tweeters = [];
// On ready we will request the tweets from each account
// after the last account we will draw the page
$(document).ready(function(){
for ( var i in accounts){
// Build the url based on account[x].twitter
var acc_url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=@";
acc_url += accounts[i]['twitter']+"&callback=?";
// build the callback function
var callback = function (data) {
// push the tweets as object
allTweets.tweeters.push({"tweeter":data});
// if it's the last account we can draw the page
if ( allTweets.tweeters.length === accounts.length ){
switch (current_part) {
...