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>
<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}}...

CSS

::-webkit-input-placeholder { color: #a18080; } 
.placeholder { color: #a18080; }
:-moz-placeholder { color: #a18080; }
::-moz-placeholder {  color: #a18080; }
:-ms-input-placeholder { color: #a18080; }

p {margin: 12px; }
[name=zip], [name=apt] { width: 75px; }
[name=state] { width: 100px; }
button {
    position: fixed;
    right: 0px;
    top: 0px;
}

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() === '' ) {
              ...