Skip to content

Instantly share code, notes, and snippets.

@johno

johno/index.html

Created November 11, 2014 20:04
Show Gist options
  • Save johno/cb28de08cb7db837f8b6 to your computer and use it in GitHub Desktop.
Save johno/cb28de08cb7db837f8b6 to your computer and use it in GitHub Desktop.
Download ZIP
Example using handlebars from https://github.com/johnotander/chattt
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars Template Example</title>
</head>
<body>
<script id="message" type="text/x-handlebars-template">
<li>
<span class="username">{{username}}</span>
<span class="message-text">{{linkify message}}</span>
</li>
</script>
<script id="user-form" type="text/x-handlebars-template">
<div id="user-form-wrap">
<label for="username-input">What will you be called?</label>
<input class="username-input" placeholder="Your username" type="text" maxlength="14" />
</div>
</script>
<script id="message-form" type="text/x-handlebars-template">
<input class="message-input" placeholder="Say something..." />
</script>
<ul class="messages"></ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/j.min.js"></script>
</body>
</html>
Raw
templates.js
var messageShow = Handlebars.compile($('#message').html());
var messageForm = Handlebars.compile($('#message-form').html())
var userForm = Handlebars.compile($('#user-form').html());
function addMessage(data, callback) {
$('.messages').append(messageShow(data));
callback();
}
function showMessageForm() {
$('body').append(messageForm());
}
function hideUserForm(callback) {
$('#user-form-wrap').hide();
callback();
}
(function() {
$('body').append(userForm);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment