Use handlebars instead of mustache

This commit is contained in:
Mattias Erming 2014-03-22 22:42:02 +01:00
parent f088b726fa
commit 8049e93703
4 changed files with 27 additions and 24 deletions

View File

@ -200,7 +200,8 @@ h2 {
#chat .message.part, #chat .message.part,
#chat .message.nick, #chat .message.nick,
#chat .message.quit, #chat .message.quit,
#chat .message.notice { #chat .message.notice,
#chat .message.error {
color: #999; color: #999;
} }

View File

@ -58,7 +58,12 @@
<script type="text/html" id="network"> <script type="text/html" id="network">
{{#networks}} {{#networks}}
<div class="network list-group" data-id="{{id}}" data-nick="{{nick}}"> <div class="network list-group" data-id="{{id}}" data-nick="{{nick}}">
{{> channels}} {{#each channels}}
<a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}">
<span class="badge pull-right"></span>
{{name}}
</a>
{{/each}}
</div> </div>
{{/networks}} {{/networks}}
</script> </script>
@ -84,10 +89,20 @@
<button class="close btn btn-danger btn-sm ">Leave</button> <button class="close btn btn-danger btn-sm ">Leave</button>
</div> </div>
<div class="users"> <div class="users">
{{> users}} {{#each users}}
<a href="{{name}}" class="user">
{{mode}}{{name}}
</a>
{{/each}}
</div> </div>
<div class="messages"> <div class="messages">
{{> messages}} {{#each messages}}
<div class="message {{type}}">
<span class="time">{{time}}</span>
<a href="{{user}}" class="user">{{mode}}{{user}}</a>
<span class="text">{{type}} {{text}}</span>
</div>
{{/each}}
</div> </div>
<form onSubmit="return false;"> <form onSubmit="return false;">
<input type="text" class="input" data-target="{{id}}"/> <input type="text" class="input" data-target="{{id}}"/>
@ -116,7 +131,7 @@
</script> </script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/js/lib/mustache.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script>
<script src="/js/lib/jquery.js"></script> <script src="/js/lib/jquery.js"></script>
<script src="/js/lib/jquery.cookie.js"></script> <script src="/js/lib/jquery.cookie.js"></script>
<script src="/js/lib/jquery.scrollGlue.js"></script> <script src="/js/lib/jquery.scrollGlue.js"></script>

View File

@ -10,18 +10,9 @@ $(function() {
var sidebar = $("#sidebar"); var sidebar = $("#sidebar");
var tpl = []; 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];
}
return Mustache.render(
tpl[id],
json,
partials || {}
);
} }
function event(type, json) { function event(type, json) {
@ -29,17 +20,13 @@ $(function() {
case "NETWORKS": case "NETWORKS":
var html = ""; var html = "";
var partials = {
messages: render("#message"),
users: render("#user")
};
json.forEach(function(network) { json.forEach(function(network) {
html += render("#window", network, partials); html += render("#window", network);
}); });
$("#windows")[0].innerHTML = html; $("#windows")[0].innerHTML = html;
sidebar.find("#list").html( sidebar.find("#list").html(
render("#network", {networks: json}, {channels: render("#channel")}) render("#network", {networks: json})
).find(".channel") ).find(".channel")
.first() .first()
.addClass("active"); .addClass("active");

View File

@ -507,7 +507,7 @@ function handleEvent(argv) {
); );
break; break;
case "001": // `registered` case "001": // 'registered' event
network.set("nick", argv.args[0]); network.set("nick", argv.args[0]);
case "rpl_motdstart": case "rpl_motdstart":
case "rpl_endofmotd": case "rpl_endofmotd":