Plugins

The plugins are what makes the difference! Olives comes up with a built-in plugins (ModelPlugin, EventPlugin, PlacePlugin), but you can create your own.

###Calling a plugin

// This will call the method 'bind' of the plugin 'model' with the params : 'innerHTML' and 'Hello'
UI.template = '<p data-model="bind: innerHTML, Hello"></p>'

###Declaring a plugin

require(["Olives/ModelPlugin", "Olives/OObject"], function (ModelPlugin, OObject) {
	
  var UI = new OObject;
	
  // Create the plugin. The plugin needs to know on which model to connect
  var modelPlugin = new ModelPlugin(UI.model);
	
  // OObjects have a plugins property to manage plugins.
  // The name following data- in the template, is actually the first param here
  // The second param is the plugin
  UI.plugins.add("model", modelPlugin);
	
});

###When are the plugins applied?

// We have the following template
UI.template = '<p data-model="bind: innerHTML, Hello"></p>'
 
// The following model
UI.model.get("Hello"); // world!
 
// And the following plugin
UI.model.plugin("model", new ModelPlugin(UI.model));

// plugins are applied on render
UI.render(); // this will turn the template into <p>world!</p>

###OObject's life cycle, when to use render, place and alive?

 // You have set up a new UI.template
 UI.render(); // Will apply the plugins and generate the dom. It's not placed
 
 // You want to place the UI.
 UI.place(); // Place will also render() the UI if you haven't done so before
 
 // Your template comes from an existing dom
 UI.alive("existing dom");
 
 // You have placed your UI, but you have changed the template.
 UI.render(); //you can render again
 
 // You have placed your UI somewhere, but you want to place it somewhere else
 UI.place(newDOM);