Knockout CheetSheet.

KoCheetSheet.yaml

Controlling Text and appearance

	Visible	visible: hasError
	Text	text: message
	Html	html: markup
	CSS	css:  { error: hasError, required: isRequired }
	Style	style: { color: messageColor, backgroundColor: backColor }
	Attr	attr: { title: itemDescription, id: itemId }

Form Field Binding
	Click		click: addItem	on <button>
	Event		event: { mouseover: showHelp, mouseuout: hideHelp }
	Submit		submit: savedata	on <form>
	Value		value: name 	on <input type=text>
	Enable		enable: isEditable
	Disable		disable: isReadOnly
	Hasfocus		hasfocus: nameFocused
	Checked		checked: isActive	on <input type=checkbox>
	Options		options: choises on <select>
	selectedOptions	selectedOptions: selectedFilters on <select>

Control Flow & Templating Bindings
	if		if:detailsLoaded
	ifnot		ifnot: hideDetails
	with		with: details
	foreach		foreach: items
	template		<script id="itemTmpl" type="text/html">
				<div data-bind="text: name"></div>
			</script>
			template: { name: 'itemTmpl', data: currentItem }
			template: { name: 'itemTmpl', foreach: myItems }
			
Tag Binging

  <div data-bind="visible : hasError">
  <div data-bind="text: message">
  <div data-bind="html: markup">
  <div data-bind="css : {error : hasError,required : isRequired}">
  <div data-bind="style:{color:messageColor,backgorundColor:backColor}">
  <div data-bind="attr : {title:itemDescription,id:itmeId}">
  

Form Binidngs

	<button data-bind="click: addItem">Add Item</button>
	<div data-bind="event : {mouseover:showHelp,mouseout:hideHelp}">Content</div>
	<form data-bind="submit:saveData">
	<input data-bind="value: firstName"/>
	<input data-bind="enable : isEditable,value : name" />
	<input data-bind="hasfocus:nameFocused,value:name" />
	<input type="checkbox" data-bind="checked:isActive"/>
	<select data-bind="options: availableFilters,selectedOptions:selectedFilters" multiple="true"></select>
	
Templating Bindings
	<div data-bind="if:detailsLoaded">
		<div data-bind="text:content"></div>
	</div>

	<div data-bind="ifnot:hideDetails">
		<div data-bind="text:content"></div>
	</div>

	<div data-bind="with:details">
		<div data-bind="text:title"></div>
		<div data-bind="text: content"></div>
	</div>

	<ul data-bind="foreach: items">
		<li data-bind="text; name"></li>
	</ul>

	<!-- just passing a named template -->
	<div data-bind="template : 'itemsTmpl'"></div>
	
	<script id="itemTmpl" type="text/html">
		<div data-bind="text:name"></div>
	</script>
	<!--   -->