Downloaded 75 times
http://canjs.us @canjsus
Why? • Prevents Leaks • Ease of Use • Fast
What’s Inside • can.Construct • can.Observe • can.Model • can.Control • can.view • can.EJS • can.route
can.Construct(static, proto) var Person = can.Construct({ init : function (name) { this.name = name; } }); var curtis = new Person("Curtis"); curtis.name
new can.Observe(data) var person = new can.Observe({ name: 'josh'}); person.bind('name‟, function(ev,newVal,oldVal){ newVal //-> 'Josh Dean' oldVal //-> 'josh' }); person.attr('name') //-> 'josh' person.name //-> 'josh' person.attr('name','Josh Dean‟);
can.Model(ajax,proto) var Todo = can.Model({ findAll : '/todo', findOne : '/todo/{id}', destroy : 'POST /todo/destroy/{id}', update : 'POST /todo/{id}', create : '/todo' },{}); Todo.findOne({id: 5}, function( todo ) { todo.attr('name') });
can.Control(proto) var Tabs = can.Control({ init: function( el ) { // show first tab }, 'li click': function( el, ev ) { // hide other tabs // show selected tab } }); new Tabs('#tabs');
can.route(route, defaults) var Routing = can.Control({ ':type/:id route': function( data ) { } }) new Routing( document.body ); can.route.attr( { type : 'todos', id: 5 } )
can.view( idOrURL, data ) -> fragment <script type='text/ejs' id='messageEJS'> <h1><%= message %></h1> </script> can.view('messageEJS', { message : 'Hello World' }) //-> frag <h1>Hello World</h1>
EmbeddedJS Templates Favorite tag is <%= ‟<blink>Blink</blink>‟ %> -> My favorite tag is <blink>Blink</blink> Favorite tag is <%== ‟<blink>Blink</blink>‟ %> -> Favorite tag is Blink
EmbeddedJS Templates <% if( devs ) { %> <% for( var i = 0; i < devs.length; i++ ) { %> <li><%= arr[i] %></li> <% } %> <% } else { %> <li>No Developers</li> <% } %> can.view('devs.ejs',{devs: ['Andy','Fred']}) //-> frag <li>Andy</li><li>Fred</li>
EJS Live Binding <% if( devs.attr('length') ) { %> <% list(devs, function(dev){ %> <li><%= dev.attr(„name‟) %></li> <% }) %> <% } else { %> <li>No Developers</li> <% } %> var devs = new can.Observe.List([ {name : 'Andy'}, {name : 'Fred'} ]) can.view('devs.ejs',{devs : devs}) //-> frag <li>Andy</li><li>Fred</li>
Why? • Prevents Leaks • Speed • Flexibility + Libraries • Ease of Use • Features vs Size
A tooltip. Undo $('#undo').bind('mouseenter',function(){ $('<div>Undo</div>').tooltipFor(this) })
What’s Wrong? $.fn.tooltipFor = function(anchor){ var $el = this .appendTo(document.body) .offset( $(anchor).offset() ) $(anchor).bind('mouseleave',function(ev){ $el.remove() }) }
Leaks
Templated Events "{option} eventName"
Templated Events var Tooltip = can.Control({ init: function( el, options ) { el.appendTo(document.body) .offset( $(options.anchor).offset() ) }, '{anchor} mouseleave': function( el, ev ) { this.element.remove(); } }); new Tooltip($('<div>Undo</div>'),{ anchor : this });
Non-leaking Global Store Critical Due Today File Taxes Brush Teeth Write talk on CanJS Write talk on CanJS Emissions Test Check into flight
Non-leaking Global Store Awesome Developers
Easy To Use
Plugins • Validations • Getter / Setter • Serialize / Deserialize • Backup / Restore • Super • Proxy $("#todos").html( „todos.ejs‟, Todo.findAll() )
can.Control and Backbone.View http://jsperf.com/tabs-timing-test
Live Binding http://jsfiddle.net/JMWf4/5/
Live Binding *can.zepto.js, angular/ember not tested, ask me why http://jsperf.com/canjs-ejs-live-bind
Features vs Size CanJS 8.49kb - jQuery Backbone 8.97kb -jQuery +Underscore Knockout 13kb none Batman 15kb -pollyfills for ES5 none Angular 24kb -jQuery Ember 39kb +metamorph.js
Library Support
Questions? safer faster easier smaller library-er http://canjs.us @canjsus