can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
124 lines (113 loc) • 2.55 kB
HTML
<html lang="en">
<head>
<title>Live Binding Performance</title>
<style>
p {
font: 12px/16px Arial;
margin: 10px 10px 15px;
}
button {
font: bold 14px/14px Arial;
margin-left: 10px;
}
#grid {
margin: 10px;
}
.box-view {
width: 20px; height: 20px;
float: left;
position: relative;
margin: 8px;
}
.box {
border-radius: 100px;
width: 20px; height: 10px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
</style>
</head>
<body>
<button onclick="runCan()">Animate with Can</button>
<button onclick="reset()">Reset</button>
<div id="grid"></div>
<script type="text/ejs" id="ejs-template">
<div class="box-view">
<div class="box" id="box-<%= this.id%>" style="top:<%= this.attr('top')%>px; left:<%= this.attr('left')%>px; background:rgb(0,0,<%= this.attr('color')%>)">
<%= this.attr('count') % 100 %>
</div>
</div>
</script>
<script type='text/javascript' src='../../../../steal/steal.js'></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script>
// Change N to change the number of drawn circles.
var N = 100;
(function(){
steal(
'can/view/ejs',
'can/view/modifiers',
'can/model',
function(){
can.Model('Box', {},{
tick: function(){
var count = this.attr('count') + 1;
this.attr({
count: count,
top: Math.sin(count / 10) * 10,
left: Math.cos(count / 10) * 10,
color: count % 255
})
}
});
var boxes = [];
var canInit = function(){
boxes = [];
for(var i = 0; i < N; i++) {
boxes.push(new Box({
id: i,
top: 0,
count: 0,
top: 0,
left: 0,
content: 0
}));
$('#grid').append('ejs-template', boxes[i])
}
}
var canAnimate = function(){
for(var i = 0; i < N; i++) {
boxes[i].tick();
}
iteration++;
if(iteration <= iterations){
window.timeout = _.defer(canAnimate);
} else {
console.log(new Date() - start)
}
}
var start,
iterations = 99,
iteration;
window.runCan = function(){
start = new Date();
iteration = 0;
reset();
canInit();
canAnimate();
};
}
);
})();
window.timeout = null;
window.reset = function() {
$('#grid').empty();
clearTimeout(timeout);
};
</script>
</body>
</html>