CanJS jQuery Template

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

by cherif_b

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.fixture.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>
<div id="demo-html">
<div id='out'></div>
<script id="app" type="text/mustache">
  <p><button can-click="addVegies">Add Vegetables</button></p>
  <tabs>
    {{#each foodTypes}}
      <panel title='title'>{{content}}</panel>
    {{/each}}
  </tabs>
</script>
</div>

CSS

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

JavaScript

can.Component.extend({
        tag: "tabs",
        template:         
                "<ul>"+
                        // Create an LI for each item in the panel's scope object
                    "{{#panels}}"+
                            "<li {{#isActive}}class='active'{{/isActive}} "+
                                "can-click='makeActive'>"+
                              "{{title}}"+
                            "</li>"+
                    "{{/panels}}"+
            "</ul>"+
            "<content></content>",
        scope: {
                // Contains a list of all panel scopes within the
                // tabs element.
                panels: [],
                // When a `<panel>` element is inserted into the document,
                // it calls this method to add the panel's scope to the
                // panels array.
                addPanel: function(panel){
                        // If this is the first panel, activate it.
                        if( this.attr("panels").length === 0 ) {
                                this.makeActive(panel)
                        } 
                        this.attr("panels").push(panel);
                },
                // When a `<panel>` element is removed from the document,
                // it calls this method to remove the panel's scope from
                // the panels array.
                removePanel: function(panel){
                        var panels = this.attr("panels");
                        can.batch.start();
                        panels.splice(panels.indexOf(panel),1);
                        // if the panel was active, make the first item active
                        if(panel === this.attr("active")){
                                if(panels.length){
                                        this.makeActive(panels[0]);
                                } else {
                                        this.removeAttr("active")
                                }
                        }
 ...