Hypothetical two-way binding API for improvement

todolist.html

<div id="template">
	<fieldset>
		<legend>New task</legend>
		<form>
			<input type="text" id="title" placeholder="Title" />
			<input type="text" id="description" placeholder="Description" />
			<button class="btn-primary btn-add">Adicionar</button>
		</form>
	</fieldset>
	
	<h2>My tasks</h2>
	<ul class="items">
		<li>
			<span class="title"></span>
			<span class="description"></span>
		</li>
	</ul>
</div>

todolist.js

define([ "observable" ], function( observable ){
	
	var todolist = {
		
		form: observable( "#template form" ).bindIds(),
		
		items: observable( "#template .items" ).forEach({
			title: obseravable(".title"),
			description: obseravable( ".description" )
		}),
		
		addItem: observable( "#template .btn-add" ).bind( "click", function( self ){
			self.items.push({
				item: self.form().title(),
				description: self.form().description()
			})
		})
	}

	return obserable( todolist )
})