Skip to content

Instantly share code, notes, and snippets.

@max-berman

max-berman/index.html

Created October 20, 2014 08:44
Show Gist options
  • Save max-berman/263c32ebe1781a7f000f to your computer and use it in GitHub Desktop.
Save max-berman/263c32ebe1781a7f000f to your computer and use it in GitHub Desktop.
Download ZIP
AjaxTest-_underscoreTemplating // source http://jsbin.com/tuwos
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="AjaxTest-_underscoreTemplating" />
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
dt {
width:100px;
float:left;
font-weight:bold;
}
.line {
border-bottom:1px dotted #ccc;
margin:10px 0 10px 0px;
clear:both;
}
ul {claer:both; margin:0;}
ul li {
list-style:none;
font-size:11px;
font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
margin-left:20px;
}
.chatList {
clear:both;
content:'>';
}
.chatList
.bld {
font-weight:bold;
}
.lst {
margin-bottom:10px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<dl class="log-list">
</dl>
<script type="text/template" id="log-template">
<% _.each(logs, function(log) { %>
<dt>ID</dt>
<dd class="logs"><%= log.id %></dd>
<dt>Email</dt>
<dd class="logs"><%= log.requested_by %></dd>
<dt>Description</dt>
<dd class="logs"><%= log.description %></dd>
<dt class="logTtl">Chat Log </dt>
<dd class="chatList exp">
<ul class="hide">
<% for(var i in log.transcript) { %>
<li class="bld">
<%= log.transcript[i].id %>
</li>
<li class="lst">
<%= log.transcript[i].message %>
</li>
<% } %>
</ul>
</dd>
<dd class="line"><dd>
<% }); %>
</script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script id="jsbin-javascript">
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': 'http://jsbin.com/tuwos/2.js',
'dataType': 'json',
'crossDomain': true,
'success': function (data) {
json = data;
}
});
return json;
})();
$(document).ready(function(){
//$('aside').html('t');
var logsTpl = _.template($("#log-template").html());
var resHtml = logsTpl({logs : json});
$(".log-list").html(resHtml);
$('.logTtl').on('click', function() {
$('.chatList ul').toggleClass('hide');
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="AjaxTest-_underscoreTemplating" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<dl class="log-list">
</dl>
<script type="text/template" id="log-template">
<% _.each(logs, function(log) { %>
<dt>ID</dt>
<dd class="logs"><%= log.id %></dd>
<dt>Email</dt>
<dd class="logs"><%= log.requested_by %></dd>
<dt>Description</dt>
<dd class="logs"><%= log.description %></dd>
<dt class="logTtl">Chat Log </dt>
<dd class="chatList exp">
<ul class="hide">
<% for(var i in log.transcript) { %>
<li class="bld">
<%= log.transcript[i].id %>
</li>
<li class="lst">
<%= log.transcript[i].message %>
</li>
<% } %>
</ul>
</dd>
<dd class="line"><dd>
<% }); %>
<\/script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"><\/script>
<script src="//code.jquery.com/jquery-git2.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">dt {
width:100px;
float:left;
font-weight:bold;
}
.line {
border-bottom:1px dotted #ccc;
margin:10px 0 10px 0px;
clear:both;
}
ul {claer:both; margin:0;}
ul li {
list-style:none;
font-size:11px;
font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
margin-left:20px;
}
.chatList {
clear:both;
content:'>';
}
.chatList
.bld {
font-weight:bold;
}
.lst {
margin-bottom:10px;
}
.hide{
display:none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': 'http://jsbin.com/tuwos/2.js',
'dataType': 'json',
'crossDomain': true,
'success': function (data) {
json = data;
}
});
return json;
})();
$(document).ready(function(){
//$('aside').html('t');
var logsTpl = _.template($("#log-template").html());
var resHtml = logsTpl({logs : json});
$(".log-list").html(resHtml);
$('.logTtl').on('click', function() {
$('.chatList ul').toggleClass('hide');
});
});</script></body>
</html>
Raw
jsbin.tuwos.css
dt {
width:100px;
float:left;
font-weight:bold;
}
.line {
border-bottom:1px dotted #ccc;
margin:10px 0 10px 0px;
clear:both;
}
ul {claer:both; margin:0;}
ul li {
list-style:none;
font-size:11px;
font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
margin-left:20px;
}
.chatList {
clear:both;
content:'>';
}
.chatList
.bld {
font-weight:bold;
}
.lst {
margin-bottom:10px;
}
.hide{
display:none;
}
Raw
jsbin.tuwos.js
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': 'http://jsbin.com/tuwos/2.js',
'dataType': 'json',
'crossDomain': true,
'success': function (data) {
json = data;
}
});
return json;
})();
$(document).ready(function(){
//$('aside').html('t');
var logsTpl = _.template($("#log-template").html());
var resHtml = logsTpl({logs : json});
$(".log-list").html(resHtml);
$('.logTtl').on('click', function() {
$('.chatList ul').toggleClass('hide');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment