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.com/release/latest/can.jquery.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<p><b></b></p>
<form id='categoriesView'>
<p><b></b></p>

<table id='rechnageAmountView'>

	<tr>
		<th>Recharge Amount</th>
		<th>Benefits</th>
		<th>Validity(Days)</th>
	</tr>
  <script type='text/ejs' id='RechnageAmountEJS'>
	<% this.each(function( rechargeAmount ) { %>
		<tr>
			<td>
				<%= rechargeAmount.attr( 'amount' ) %>
			</td> 	
			<td>
				<%= rechargeAmount.attr( 'benefit' ) %>
			</td> 	
			<td>
				<%= rechargeAmount.attr( 'validity' ) %>
			</td> 
		</tr>	
	<% }) %>
	</table>
  </form>
 </script>
 
 
<script type='text/ejs' id='categoriesEJS'>
	<% this.each(function( category ) { %>
		<input type="radio" 
			name="category" 
			<%= category.attr('id') == 1 ? 'checked' : '' %>
			value=<%= category.attr( 'name' ) %> 
			<%= (el) -> el.data('category',category) %>>
				<%= category.attr( 'name' ) %>
		</input> 	
	<% }) %>
  
</script>

CSS

table
		{
			border-collapse:collapse;
			width:50%;
		}
		table, td, th
		{
			border:1px solid black;
			text-align:center;
		}

JavaScript

var CATEGORIES = [{id: 1 , name: "2G Internet Recharge"},
				  {id: 2 , name: "3G Internet Recharge"},
				  {id: 3 , name: "full talktime Recharge"},
				  {id: 4 , name: "Validity and talktime Recharge"},
				  {id: 5 , name: "National and international roaming"}];
var RECHARGEAMOUNTS =[{
					   id: 1 , 
					   values : [{amount: "Rs. 100" , benefit:"300 MB" ,validity:"30"},
								 {amount: "Rs. 200" , benefit:"1 GB" ,validity:"30"}]
					   },
					   {
					   id: 2 , 
					   values : [{amount: "Rs. 10" , benefit:"300 MB" ,validity:"30"},
								 {amount: "Rs. 99" , benefit:"100 GB" ,validity:"90"}]
					   },
					   {
					   id: 3 , 
					   values : [{amount: "Rs. 80" , benefit:"1 GB" ,validity:"50"},
								 {amount: "Rs. 99" , benefit:"100 GB" ,validity:"50"}]
					   },
					   {
					   id: 4 , 
					   values : [{amount: "Rs. 55" , benefit:"30 MB" ,validity:"10"},
								 {amount: "Rs. 200" , benefit:"1 GB" ,validity:"30"},
								 {amount: "Rs. 99" , benefit:"100 GB" ,validity:"90"}]
					   },
					   {
					   id: 5 , 
					   values : [{amount: "Rs. 880" , benefit:"100 MB" ,validity:"90"},
								 {amount: "Rs. 550" , benefit:"2 GB" ,validity:"30"},
								 {amount: "Rs. 1000" , benefit:"4 GB" ,validity:"90"},
								 {amount: "Rs. 1550" , benefit:"10 GB" ,validity:"90"}]
					   }
					 ];		

//Model Category
CategoryModel = can.Model({
  findAll : function(){
      return $.Deferred().resolve(CATEGORIES);
    }
},{});

//Model Category
ReachargeAmountModel = can.Model({
	findAll : function(){
      return $.Deferred().resolve(RECHARGEAMOUNTS);
    },
	findOne : function(params){
      return $.Deferred().resolve(RECHARGEAMOUNTS[(+params.id)-1]);
    }
},{});


// Can Control 
var CategoryControl = can.Control({
    // called when a new Todos() is created
    init: function (element, options) {
		// get all todos and render them with
        // a template in the element's html
        var el = this.element;
       ...