CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<div id="sldr"></div>
<div id="video"></div>
<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="sldrStache" type="text/mustache">
    <ui-slider format="format"></ui-slider>
</script>
<script id="videoStache" type="text/mustache">
    <video><h1>Video</h1></video>
</script>

CSS

body{color:#333;}
.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
    color:#333;
}
p { 
    margin: 10px 0;
}

#sldr{
    padding:50px;
}
ui-slider, video {  display: block; }

JavaScript

var PlutoApp = can.Construct.extend({
    components: [],
    
    state: new can.Map({
        playing: false
    })
})

var Pluto = new PlutoApp();

var PC = can.Component.extend('pluto.component', {
    
}, {
    tag: 'pluto',
    init: function(){
      Pluto.components.push(this);
    },
    scope: {},
    events: {},
    subscribe:  function(eventName, handler){
            can.on.call(Pluto, eventName, handler)
        },
    publish: function(eventName, opts){
            can.trigger(Pluto, this.constructor.shortName + '.' + eventName, opts);
        }
});

var slider = pluto.component.extend({
    tag:'ui-slider',
    init: function(){
        var self = this;
        this.subscribe('Video.test', function(){
            //console.log('slidertest', arguments);
        })
    },
    scope:{      
        
    },
    events:{
        inserted:function(el,ev){
           el.slider();
        }
    }
});

var video = pluto.component.extend('pluto.Video',{
    tag: 'video',
    init: function(){
        this.subscribe('test', function(){
            //console.log('vidtest', arguments);
        })

    }
});

$('#sldr').html(can.view('sldrStache',{}));
$('#video').html(can.view('videoStache',{}));
setTimeout(function(){
    can.trigger(Pluto, 'test', []);
    video.prototype.publish('test', [])
}, 2000);

var start = Date.now();
console.log(start)
for(var i=0; i <= 1000000; i++){
    video.prototype.publish('test', [])
}
var bench = (Date.now() - start) / 1000;
console.log(bench)