can-component
Version:
Custom elements for CanJS
154 lines (126 loc) • 3.18 kB
HTML
<html>
<head>
<style>
p {
font: 12px/16px Arial;
margin: 10px 10px 15px;
}
button {
font: bold 14px/14px Arial;
margin-left: 10px;
}
#grid {
margin: 10px;
}
#timing {
clear: both;
padding-top: 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 id='start'>Start</button>
<button id='stop'>Stop</button>
<div id='timing'>Last ~45.58 on Justin's computer</div>
<script id="complex-component-template" type='text/stache'>
<child-component firstName:from="first" lastName:from="last">
<can-template name="a-template"><b>{{this}}</b></can-template>
<can-template name="b-template"><i>{{this}}</i></can-template>
</child-component>
</script>
<script id="child-component-template" type='text/stache'>
<h1>
<span><can-slot name="a-template" this:from='firstName'/></span>
<span><can-slot name="b-template" this:from='lastName'/></span>
</h1>
</script>
<script id="app-template" type='text/stache'>
{{#each items}}
<div><complex-component/></div>
{{/each}}
</script>
<script src="../node_modules/steal/steal.js" main="@empty">
var Component = require("can-component");
var DefineMap = require("can-define/map/map");
var stache = require("can-stache");
var DefineList = require("can-define/list/list");
Component.extend({
tag: "complex-component",
ViewModel: DefineMap.extend({
first: {value: "justin"},
last: {value: "meyer"}
}),
view: stache.from("complex-component-template"),
helpers: {
one: function(){
return 1;
},
two: function(){
return 2;
}
}
});
Component.extend({
tag: "child-component",
ViewModel: DefineMap.extend({
firstName: "string",
lastName: "string"
}),
view: stache.from("child-component-template")
})
var template = stache.from('app-template');
var items = new DefineList();
for(var i =0; i < 50; i++) {
items.push( new DefineMap({ number: i }) );
}
var count = 0;
var run = function(){
//var now = new Date();
var frag = template({items: items});
//console.log("render", new Date() - now);
};
document.getElementById("start").addEventListener("click", function(){
loopCount = 0;
totalTime = 0;
//console.profile("loops");
benchmarkLoop(run);
});
window.timeout = null;
window.totalTime = null;
window.loopCount = null;
window.benchmarkLoop = function(fn) {
var startDate = new Date();
fn();
var endDate = new Date();
totalTime += endDate - startDate;
loopCount++;
if (loopCount % 10 === 0) {
document.getElementById("timing").innerHTML = 'Performed ' + loopCount + ' iterations in ' + totalTime + ' ms (average ' + (totalTime / loopCount).toFixed(2) + ' ms per loop).';
}
if(loopCount < 200) {
timeout = setTimeout(function(){
benchmarkLoop(fn);
},1);
} else {
//console.profileEnd("loops");
}
};
</script>
</body>
</html>