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="//canjs.com/release/2.1.3/can.stache.js"></script>
<div id="main"></div>

<script type="text/x-stache-template" id="app-template">
    <env-main>
  <span>Environment</span>
 
  <br/>
  
  <env-runtime subject="PHP"></env-runtime>
  <env-runtime subject="Java"></env-runtime>
  <env-runtime subject="Ruby"></env-runtime>
  <env-runtime subject="C"></env-runtime>
 
</env-main>
</script>

<script type="text/x-stache-template" id="environment">
<div class="col-md-12">
	<div class='panel panel-default'>
	  <div class="panel-title"></div>
	  <div class='panel-body'>
	    <content/>
	  <div class='clearfix'></div>
	  </div>
	</div>
</div>
    </script>
<script type="text/x-stache-template" id="runtime">
<div class="col-md-3">
	<div class='panel panel-default'>
	  <div class='panel-body'>
	    {{subject}}
  	  <content/>   
	  </div>
	</div>
</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

(function (namespace) {
	can.Component.extend({
	  tag: "env-runtime",
	  template: can.view("runtime")
	});
 
	can.Component.extend({
	  tag: "env-main",
	  template: can.view("environment")
	});
 
})(this);

var frag=can.view("app-template",{});
$("#main").html(frag);