Skip to content

Instantly share code, notes, and snippets.

@Enome
Created September 11, 2011 15:04
Show Gist options
  • Save Enome/1209688 to your computer and use it in GitHub Desktop.
Save Enome/1209688 to your computer and use it in GitHub Desktop.
Damn, knockout.js 1.3 Control Flow is handsome.
<div id='Page'>
<div id='Side'>
<div id='Header'>
<!-- ko with: commandline -->
<input type="text" data-bind='value: command' />
<!-- /ko -->
</div>
<!-- ko with: clients -->
<ul id='Clients'>
<!-- ko foreach: items -->
<li data-bind='click: select, css: {selected:selected}'>
<span data-bind='text: data.name'>Select</span>
</li>
<!-- ko if: selected -->
<li class='add' data-bind='click: create_invoice'>
+ add invoice
</li>
<!-- ko foreach: invoices -->
<li class='add'>
<span data-bind='text: identifier'></span>
</li>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</ul>
<!-- /ko -->
</div>
<div id='Content'>
<!-- ko with: selected -->
<!-- ko if: client -->
<div id='Client'>
<h2 data-bind='text: client().data.name'></h2>
<p>
<label>Identifier</label>
<input type='text' data-bind='value: client().data.identifier' />
</p>
<p>
<label>Name</label>
<input type='text' data-bind='value: client().data.name' />
</p>
<p>
<label>Email</label>
<input type='text' data-bind='value: client().data.email' />
</p>
<p>
<label>Phone</label>
<input type='text' data-bind='value: client().data.phone' />
</p>
<button data-bind='click: client().save'>Save</button>
</div>
<!-- /ko -->
<!-- ko if: invoice -->
<div id='Invoice'>
<h2 data-bind='text: invoice().data.identifier'></h2>
<p>
<label>Identifier</label>
<input type='text' data-bind='value: invoice().data.identifier' />
</p>
<button data-bind='click: identifier().save'>Save</button>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
@KOVIKO
Copy link

KOVIKO commented Nov 8, 2011

The HTML comments aren't meant to be a replacement, but a supplement. When there is an element available for the control structure, it's wise to use that instead to save on extraneous markup and bytes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment