CanJS jQuery Template

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

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.view.mustache.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<div id="test"></div>
<div id="val"></div>

<script id="list" type="text/mustache">
   <div id="listing">
    <select>
         {{#websites}}
        <option value={{id}}>{{name}}</option>
        {{/websites}}
    </select>
       <div>
</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

can.fixture("GET /websites", function () {
    var websites = [{
        id: 1,
        name: "CanJS",
        url: "http://canjs.us"
    }, {
        id: 2,
        name: "jQuery++",
        url: "http://jquerypp.com"
    }, {
        id: 3,
        name: "JavaScriptMVC",
        url: "http://javascriptmvc.com"
    }, {
        id: 4,
        name: "Bitovi",
        url: "http://bitovi.com"
    }, {
        id: 5,
        name: "FuncUnit",
        url: "http://funcunit.com"
    }, {
        id: 6,
        name: "StealJS",
        url: "http://stealjs.com"
    }, {
        id: 7,
        name: "jQuery",
        url: "http://jquery.com"
    }, {
        id: 8,
        name: "Mootools",
        url: "http://mootools.com"
    }, {
        id: 9,
        name: "Dojo",
        url: "http://dojo.com"
    }, {
        id: 10,
        name: "YUI",
        url: "http://yui.com"
    }, {
        id: 11,
        name: "DoneJS",
        url: "http://donejs.com"
    }, {
        id: 12,
        name: "Mindjet Connect",
        url: "http://connect.mindjet.com"
    }, {
        id: 13,
        name: "JSFiddle",
        url: "http://jsfiddle.net"
    }, {
        id: 14,
        name: "Zepto",
        url: "http://zepto.com"
    }, {
        id: 15,
        name: "Spill",
        url: "http://spill.com"
    }, {
        id: 16,
        name: "Github",
        url: "http://github.com"
    }];
    return websites;
});

var Websites = can.Model({
    findAll: "GET /websites"
}, {});

var List = can.Control({
    'init': function (element, options) {
        var self = this;
        can.view("list", {
            websites: Websites.findAll({})
        }).then(function (frag) {
            self.element.html(frag);
//            self.showOption(self.element.find('#listing select'));         
        });
        
    },  
    '#listing select change':'showOption',
    showOption: function(el) {
        console.log(el)
        $('#val').html(el.val());
    }
});

new List("#test");