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.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>
<script src="http://underscorejs.org/underscore.js"></script>
<div id="app"></div>

       <script id="appStache" type="text/mustache">
            <div><a href="#!">LOGO</a></div>
              <ul>
            {{#modules}}
                <li>{{{link}}}</li>              
            {{/modules}}
             </ul>
         <div id="outlet"></div>
       </script>

        <script id="home" type="text/mustache">
           {{message}}
       </script>

       <script id="accounts" type="text/mustache">
           <div id="accounts-list">
             
           </div>
           <div id="view-account"></div>



       </script>

         <script id="accountsList" type="text/mustache">
         <ul>
           {{#accounts}}
              <li class="account" {{data 'account'}}><a href="javascript://" title="">{{label}}</a></li>
           {{/accounts}}
           </ul>



       </script>

        <script id="transactionsListStache" type="text/mustache">
        <table>
          <caption>Transactions...

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

var accounts = [{
    id: 1,
    label: 'John',
    balance: 99,
    transactions: [{
        id: 100,
        credit: 100,
        debit: 0,
    }, {
        id: 3000,
        credit: 20,
        debit: 109
    }]
}, {
    id: 2,
    label: 'Kate',
    balance: 249,
    transactions: [{
        id: 100,
        credit: 100,
        debit: 0,
    }, {
        id: 101,
        credit: 0,
        debit: 100
    }]

}, {
    id: 3,
    label: 'Molly',
    balance: 499,
}, {
    id: 4,
    label: 'Brent',
    balance: 999,
}, {
    id: 5,
    label: 'Tommy',
    balance: 499,
}, {
    id: 6,
    label: 'Beth',
    balance: 58,
}];

var transactions = [{
    id: 100,
    credit: 100,
    debit: 0,
    account_id: 2
}, {
    id: 101,
    credit: 0,
    debit: 100,
    account_id: 4
}];


can.fixture("GET /accounts", function(request, response) {
    return accounts;
});

can.fixture("GET /accounts/{id}", function(request, response) {
    var model = _.find(accounts, function(account) {
        return account.id == request.data.id;
    });

    return model;

});

can.fixture('GET /transactions', function(request) {
    return transactions;
});

can.fixture('GET /transactions/{id}', function(request) {
    var model = _.find(transactions, function(transaction) {
        return transaction.id == request.data.id;
    });

    return model;
});

can.Model.extend('Transaction', {
    findAll: 'GET /transactions',
    findOne: 'GET /transactions/{id}'
}, {});

can.Model.extend('Account', {
    attributes: {
        transactions: Transaction,
    },
    findAll: 'GET /accounts',
    findOne: 'GET /accounts/{id}'
}, {});



can.Control.extend('AppControl', {
    init: function(el, options) {
        el.html(can.view('appStache', {
            modules: options.modules
        }, {
            link: function(options) {
                var data = {
                    control: options.context.attr('id')
                },
                    name =...