CanJS Test 1

Simple CanJS control experiment 1.

by peter9477

HTML

<script src="https://canjs.com/release/2.3.23/can.jquery.js"></script>
<div class="header">
    <h1>CanJS Test 1</h1>
</div>

<!-- YOUR CODE HERE -->
<div id="content"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/mustache">
    <h2>CanJS Test Control</h2>
    <p id="msg">Clicked {{count}} times</p>
 	<button>Click Me</button>
</script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h2 {
    font-size: 18px;
    text-decoration: underline;
}
p { 
    margin: 10px 0;
}
#content {
    border: 1px solid red;
    background-color: #feeeee;
    padding: 0.5em;
    margin: 0.5em;
    width: 400px;
}

JavaScript

var model = new can.Map({
	count: 0
});

var MyCtrl = can.Control.extend({
    init: function(element, options) {
    	element.html(can.view('main-template', model));
    },
    'button click': function() {
        model.attr('count', model.attr('count') + 1);
    }
});

new MyCtrl('#content');