CanJS jQuery Template

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

by donejs

HTML

<script src="http://canjs.com/release/2.0.1/can.jquery.js"></script>
<form id='attendee'></form>
<pre id='out'></pre>
<button id='ba'>Payal's Grandmother Preset</button>
<script id='attendeeMustache' type='text/mustache'>
<p id='attending'>
	Can you make it? 
	<input value="yes" type="radio" id="available" {{checked attendee.attending}}/>
	<label for='available'>Yes</label>
	<input value="no" type="radio" id='notavailable' {{checked attendee.attending}}/> 
	<label for='notavailable'>No</label>.
</p>
<p>
	<input name="name" {{value attendee.name}} {{placeholder "name" attendee.name}}/>
</p>
<div id='address' {{fadeInWhen attending}}>
	<p id='country'>
		Country:</br>
		<input name="country" value="USA" type="radio" id='usa' {{checked attendee.country}} /> 
		<label for='usa'>USA</label>
		<input name="country" value="India" type="radio" id='india' {{checked attendee.country}}/> 
		<label for='india'>India</label>
		<input name="country" value="Canada" type="radio" id='canada' {{checked attendee.country}}/>
		<label for='canada'>Canada</label>
	</p>
	
	
	<div id='street'>
		<p>
			<input name="street" {{value attendee.street}} {{placeholder "street" attendee.street}}/>
			<input name="apt" {{value attendee.apt}} {{placeholder "apt" attendee.apt}}/>
		</p>
		<p id='location-units'>
			<input name="city" 
			   {{value attendee.city}} 
			   {{fadeInWhen cityOrStateSetOrCountryNotUSA}}
			   {{placeholder "city" attendee.city}}/>
			<input name="state" 
				{{value attendee.state}} 
				{{fadeInWhen cityOrStateSetOrCountryNotUSA}}
				{{placeholder statePlaceholder attendee.state}}/>
			<input name="zip" 
				{{value attendee.zip}} 
				{{placeholder zipPlaceholder attendee.zip}}/>
		</p>
	</div>
</div>
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400);

* {
	font-family: 'Lato', sans-serif;
    font-size: 16px;
    text-shadow: 0 1px 0 #ffffff;
}
input, textarea, select {
	-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.07);
	-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.07);
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.07);
	border: 1px solid #ccc;
    padding: 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 12px;
}
#attendee input:focus, textarea:focus {
	-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.07);
	-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.07);
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.07);
	border: 1px solid #969595;
	background-color: #fffef2;
}
::-webkit-input-placeholder { color: #ccc;font-size: 12px; } 
.placeholder { color: #ccc;font-size: 12px; }
:-moz-placeholder { color: #ccc; font-size: 12px;}
::-moz-placeholder {  color: #ccc; font-size: 12px;}
:-ms-input-placeholder { color: #ccc; font-size: 12px;}

p {margin: 12px; }
[name=zip], [name=apt] { width: 75px; }
[name=state] { width: 100px; }
button {
    position: fixed;
    right: 0px;
    top: 0px;
}
pre {
     margin:10px;
    padding: 10px;
    background-color: #d7e5fd;
    color: #011a49;
    font-size: 11px;
    font-family: "Courier New", Courier, mono;
}
button {
    margin: 10px;
    background-color: #165489;
    color: #fff;
    font-size: 12px;
    border: 1px solid #02325b;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 -1px 0 #02325b;
}
button:hover {
    background-color: #02325b;
}

JavaScript

setupMustacheHelpers()

var attendee = new can.Observe({
    country: "USA"
}),
	placeholders = {
        usa: {
            state: "state",
            zip: "zip code"
        },
        india: {
            state: "state",
            zip: "postal code"
        },
        canada: {
            state: "province",
            zip: "postal code"
        }
    },
    countryPlaceholders = function(){
        return placeholders[(attendee.attr('country')).toLowerCase()]
    };


$("#attendee").html( can.view("attendeeMustache", {
    attendee: attendee,
    statePlaceholder: can.compute(function(){
        return countryPlaceholders().state
    }),
    zipPlaceholder: can.compute(function(){
        return countryPlaceholders().zip
    }),
    cityOrStateSetOrCountryNotUSA: can.compute(function(){
        return attendee.attr('state') || 
            attendee.attr('city') || 
            (   attendee.attr('country') && 
             	attendee.attr('country') !== "USA"   );
    }),
    attending: can.compute(function(){
        console.log("re-eval");
    	return attendee.attr('attending') === 'yes'  
    })
}));

attendee.bind("change", function(){
  $("#out").text( JSON.stringify( attendee.attr() ).replace(/,/g,",\n ") );
})


$("#ba").click(function(){
    attendee.attr({
        name: "Payal's Grandmother",
        attending: "yes",
        country: "India",
        street: "1234 Punjab St",
        apt: "4u",
        city: "Hyderabad",
        state: "Andhra Pradesh",
        zip: "500001"
    })
})

function setupMustacheHelpers() {
 
    
	var placeholderSupported = false// "placeholder" in document.createElement("input");

    // Adds a placeholder for browsers that don't support it
    Placeholder = can.Control({
        init: function(element, options) {
            if( placeholderSupported ) {
            		this.element.attr('placeholder', this.options.placeholder() );   
            } else {
                if( this.element.val() === '' ) {
              ...