can/view/bindings/doc/bindings-select-undefined.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<div id="demo">
<div id='out'></div>
<script type='text/stache' id="attending-template">
<p>Attending? 
  <select {($value)}='selectAttending'>
	  <option value='yes'>Yes</option>
	  <option value='no'>No</option>
	  <option value='maybe'>Maybe</option>
  </select>
</p>
<p>You {{attendence}}.</p>
</script>
</div>
<script>
	DEMO_HTML = document.getElementById("demo").innerHTML;
</script>
<script src="../../../node_modules/steal/steal.js" main="@empty"></script>
<script>
steal("can/view/bindings", "can/view/stache", "can/map/define",function(){
	
Person = can.Map.extend({
	define: {
		selectAttending: {
			get: function(){
				return this.attr("attending") || null;
			},
			set: function(attending){
				if(!attending ) {
					this.removeAttr("attending");
					
				} else {
					this.attr("attending", attending);
				}
			}
		}
	}
});
	
person = new Person({
});

var frag = can.view(
	"attending-template",
	person,
	{
      attendence: function(){
      	var keys = can.Map.keys( person );
        return keys.indexOf("attending") >= 0 ? 
          "are a " + person.attr("attending") :
          "have not responded";
    
    }
});

$("#out").html( frag );

});
</script>