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.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.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://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<!-- YOUR CODE HERE -->
<div id="dummy"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="datagridEJS" type="text/ejs">
    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
        <thead>
            <tr>
                <th>Game</th>
                <th>Character</th>
                <th>Boss</th>
            </tr>
        </thead>
        <tbody>
            <% games.each(function(g) { %>
                <tr class="game" <%= (el) -> el.data('game', g) %>>
                    <td><%= g.attr('name') %></td>
                    <td><%= g.attr('character') %></td>
                    <td><%= g.attr('boss') %></td>
                </tr>
            <% }) %>
        </tbody>
    </table>
</script>

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

(function() {
    
    Game = can.Model({
        findAll: "GET /games",
        destroy: "DELETE /games/{id}"
    }, {
    });
    
    var GAMES = [
    {
        id: 1,
        name: 'The Legend of Zelda',
        character: 'Link',
        boss: 'Gannon'
    },
    {
        id: 2,
        name: "Metroid",
        character: 'Samus',
        boss: 'Mother Brain'
    },
    {
        id: 3,
        name: "Castlevania",
        character: 'Simon Belmont',
        boss: 'Dracula'
    }
    ];
    
    can.fixture('GET /games', function() { return GAMES; });
    
    can.fixture('DELETE /games/{id}', function(original, respondWith, settings) {
        respondWith({
            deleted: true
        });
    });
    
    Dummy = can.Control({
        init: function(element, options) {
            var self = this;
            can.when(Game.findAll()).then(function(games) {
                window.games = games;
                self.element.append(can.view('datagridEJS', {
                    games: games
                }));
                
                $('#example').dataTable({'sDom': 't<>'});
            });
        }
    });

    new Dummy('#dummy');
})();