CanJS jQuery Template

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

by thecountofzero

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>
<script src="https://raw.github.com/thecountofzero/tracker/master/tracker-nosteal.js"></script>
<!-- YOUR CODE HERE -->
<div id="dummy"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="playerEJS" type="text/ejs">
    First Name: <input id="fname" name="name.first" value="<%= player.attr('name.first') %>" /><br/><br/>
    Last Name: <input id="lname" name="name.last" value="<%= player.attr('name.last') %>" /> No Tracker<br/><br/>
    Team: <input id="team" name="team" value="<%= player.attr('team') %>" /><br/><br/>
    Is Awesome: <input type="checkbox" id="isAwesome" name="isAwesome" <%= player.attr('isAwesome') ? "checked" : "" %> /><br/><br/>
    Username: <input id="username" name="username" value="<%= player.attr('username') %>" /> No Tracker<br/><br/>
    Position: 
    <select id="position" name="position">
        <option value="C">Catcher</option>
        <option value="1B">First Base</option>
        <option value="2B">Second Base</option>
        <option value="3B">Third Base</option>
        <option...

CSS

.dirty { background-color: yellow }

JavaScript

(function() {
    
    Dummy = can.Control({
        init: function(element, options) {
            this.player = new can.Observe({
                name: {
                    first: "Ryan",
                    last: "Braun"
                },
                team: "Milwaukee Brewers",
                number: 8,
                username: "hebrewhammer",
                isAwesome: true,
                position: "2B",
                description: "Best fantasy baseball player since 2007",
                favoriteColor: "black",
                fantasy: {
                    "2012": {
                        points: 560
                    }
                }
            });
            
            this.element.append(can.view('playerEJS', {
                player: this.player
            }));
            
            this._initTrackers();
        },
            
        _initTrackers: function() {

            t = new Tracker(can.$('#fname'), {
                linkedObj: this.player,
                changeCallback: function(val) {
                    console.log('booyah: ' + val);
                }
            });
        
            u = new Tracker(can.$('#team'), {
                linkedObj: this.player
            });
        
            v = new Tracker(can.$('#isAwesome'), {
                linkedObj: this.player
            });
        
            w = new Tracker(can.$('#position'), {
                linkedObj: this.player
            });
        
            x = new Tracker(can.$('#description'), {
                linkedObj: this.player
            });
        
            y = new Tracker(can.$('input[name=favoriteColor]'), {
                linkedObj: this.player
            });
        
            z = new Tracker(can.$('#fantasyPts2012'), {
                linkedObj: this.player
            });
        },
            
        'a.reset click': function(el, ev) {
            $('input, select, textarea').trigger('reset');
        }
    });
    
    new...