Use handlebars instead of mustache

client/index.html

@@ -53,23 +53,25 @@
 	</div>
 	</div>
 	
-	<script type="text/html" id="networks">
+	<script type="text/x-handlebars-template" id="networks">
-	{{#networks}}
+	{{#each networks}}
 	<div id="network-{{id}}" class="network list-group">
-		{{> channels}}
+		{{partial "#channels"}}
 	</div>
-	{{/networks}}
+	{{/each}}
 	</script>
-	<script type="text/html" id="channels">
+	
-	{{#channels}}
+	<script type="text/x-handlebars-template" id="channels">
+	{{#each channels}}
 	<a href="{{name}}" id="channel-{{id}}" class="channel list-group-item">
 		<span class="badge pull-right"></span>
 		{{name}}
 	</a>
-	{{/channels}}
+	{{/each}}
 	</script>
-	<script type="text/html" id="windows">
+	
-	{{#windows}}
+	<script type="text/x-handlebars-template" id="windows">
+	{{#each windows}}
 	<div id="window-{{id}}" class="window {{type}}">
 		<div class="title">
 			<div class="toggle">
@@ -82,42 +84,44 @@
 			</button>
 		</div>
 		<div class="users">
-			{{> users}}
+			{{partial "#users"}}
 		</div>
 		<div class="messages">
-			{{> messages}}
+			{{partial "#messages"}}
 		</div>
 		<form onSubmit="return false;">
 			<input type="text" class="input" data-target="{{id}}"/>
 			<input type="submit" style="display: none;"/>
 		</form>
 	</div>
-	{{/windows}}
+	{{/each}}
 	</script>
-	<script type="text/html" id="users">
+	
+	<script type="text/x-handlebars-template" id="users">
 	<div class="count">
 		Users: {{users.length}}
 	</div>
-	{{#users}}
+	{{#each users}}
 	<div class="user">
 		{{name}}
 	</div>
-	{{/users}}
+	{{/each}}
 	</script>
-	<script type="text/html" id="messages">
+	
-	{{#messages}}
+	<script type="text/x-handlebars-template" id="messages">
+	{{#each messages}}
 	<div class="message {{type}}">
 		<div class="time">{{time}}</div>
 		<div class="user">{{from}}</div>
 		<div class="type">{{type}}</div>
 		<div class="text">{{message}}</div>
 	</div>
-	{{/messages}}
+	{{/each}}
 	</script>
 	
 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script>
 	
 	<script src="/socket.io/socket.io.js"></script>

client/js/chat.js

@@ -30,19 +30,17 @@ $(function() {
 	});
 	
 	var tpl = [];
-	function render(id, json, partials) {
+	function render(id, json) {
-		tpl[id] = tpl[id] || $(id).html();
+		tpl[id] = tpl[id] || Handlebars.compile($(id).html());
-		if (!json) {
+		return tpl[id](json);
-			// If no data is supplied, return the template instead.
+	}
-			// Handy when fetching partials.
+	
-			return tpl[id];
+	Handlebars.registerHelper(
+		"partial",
+		function(id) {
+			return new Handlebars.SafeString(render(id, this));
 		}
-		return Mustache.render(
-			tpl[id],
-			json,
-			partials || {}
 	);
-	}
 	
 	function handleEvent(event, json) {
 		var data = json.data;
@@ -50,19 +48,13 @@ $(function() {
 		
 		case "network":
 			var html = "";
-			var partials = {
-				users: render("#users"),
-				messages: render("#messages"),
-			};
 			data.forEach(function(n) {
-				html += render(
+				html += render("#windows", {windows: n.channels});
-					"#windows", {windows: n.channels}, partials
-				);
 			});
 			chat[0].innerHTML = html;
 
 			sidebar.find("#list").html(
-				render("#networks", {networks: data}, {channels: render("#channels")})
+				render("#networks", {networks: data})
 			).find(".channel")
 				.first()
 				.addClass("active")
@@ -104,13 +96,13 @@ $(function() {
 			sidebar.find(".channel").removeClass("active");
 			
 			$("#network-" + json.target).append(
-				render("#channels", {channels: data})
+				render("#channels", {channels: [data]})
 			).find(".channel")
 				.last()
 				.addClass("active");
 
 			chat.append(
-				render("#windows", {windows: data})
+				render("#windows", {windows: [data]})
 			).find(".window")
 				.last()
 				.find("input")
@@ -124,8 +116,8 @@ $(function() {
 			break;
 
 		case "user":
-			var target = chat.find("#window-" + json.target).find(".users");
+			var html = render("#users", {users: data});
-			target.html(render("#users", {users: data}));
+			var target = chat.find("#window-" + json.target + " .users").html(html);
 			break;
 
 		case "message":
@@ -138,7 +130,7 @@ $(function() {
 				target = target.parent().find(".active");
 			}
 			
-			var msg = $(render("#messages", {messages: data}))
+			var msg = $(render("#messages", {messages: [data]}));
 			
 			target = target.find(".messages");
 			target.append(msg);
@@ -253,13 +245,6 @@ $(function() {
 		$(this).closest(".window").find(".messages").scrollToBottom();
 	});
 	
-	chat.on("mouseover", ".text", function() {
-		var self = $(this);
-		if (!self.hasClass("parsed")) {
-			self.addClass("parsed").html(uri(self.html()));
-		}
-	});
-	
 	function uri(text) {
 		return URI.withinString(text, function(url) {
 			return "<a href='" + url + "' target='_blank'>" + url + "</a>";

lib/models.js

@@ -30,7 +30,7 @@ models.Message = Backbone.Model.extend({
 	defaults: {
 		type:    "",
 		time:    "",
-		from:    "",
+		from:    "-!-",
 		message: "",
 	},
 	initialize: function() {