Plugin: Bind.plugin

This is the most powerful plugin of Emily. It removes all the burden of adding/modifying/updating/deleting dom nodes to reflect the UI's Model. As long as the model is a subtype of Emily's store (CouchDBStore, LocalStore...), it will do the dom manipulations for you.

###Connecting the plugin to the model and adding it to the UI plugins list

// This will make the plugin available through the name model in your dom
UI.plugins.add("bind", new BindPlugin(UI.model));

Say this is your model

UI.model.reset({
	"firstname": "Olivier",
	"contacts": {
		"mail": "pode.fr  AT  gmail.com",
		"mobile": "+336123456"
	}
});

This view will display the data. Bind actually triggers the innerHTML property of the dom node. Any other property works too.

<div>
	<p data-bind="bind:innerHTML, firstname"></p>
	<p>Contacts : <br />
		Mail: <span data-bind="bind:innerHTML: contacts.mail"></span>
		Mobile: <span data-bind="bind:innerHTML: contacts.mobile"></span>
	</p>
</div>

###Updating the generated view

// The view will always reflect the model, Olives does the plumbing for you
UI.model.set("contacts", {
	"mail": "pode.fr AT gmail.com",
	"mobile": "+654321633"
});

###Extending BindPlugin is possible too

What if you want to do stuff a little bit more complex than just setting a property? You can use bind for toggling a dom node's class!

This example is extracted from the live example:

// You can add new bindings when you instanciate the BindPlugin
var bindPlugin = new BindPlugin(UI.model, {
 toggleClass: function (value) {
 // value comes from the model, the this object is the dom node
  value ? this.classList.add("completed") : this.classList.remove("completed");
 }
});

<li data-bind="bind:toggleClass,completed"></li>

###Generating lists with foreach

The BindPlugin can also render lists.

UI.model.reset([
	{
		firstname: "Olivier",
		lastname: "Scherrer"
	},
	
	{
		firstname: "Olivier",
		lastname: "Scherrer"
	}
]);

<!--  foreach will repeat the li for each value of the model -->
<ul data-bind="foreach">
	<li>
		<span data-bind="bind:innerHTML, firstname"></span>
		<span data-bind="bind:innerHTML, lastname"></span>
	</li>
</ul>

###Limiting the number of items displayed by foreach

If your model has more items than what you want to display, you can set limits

<!--  This will display 10 items, starting from the first one, to the foreach called "people" -->
<ul data-bind="foreach:people,0,10">
	<li>
		<span data-bind="bind:innerHTML, firstname"></span>
		<span data-bind="bind:innerHTML, lastname"></span>
	</li>
</ul>

###Pagination

And if you want to change the number of displayed items, and display the 10 next items:

// this is the plugin that you have declared in UI.plugins
bindPlugin.updateStart("people", 10); // this will display the items from the 11th
bindPlugin.updateNb("people", 5); // this will reduce the number of displayed item to 5
 
// When you're happy with the settings
bindPlugin.refresh("people");