OObject

The OObject is the spine of your UI. From its creation, it will handle the plumbing with the model and the view.

• Consider the OObject as the Controller of your UI.
• The Model is the Store it references.
• The View is your HTML code.

###Creating an OObject

var UI = new OObject;

###Adding it a template

UI.template = "<p>Hello world!</p>";

###Placing it in the DOM

UI.place(document.body);

###Creating a reusable UI

define("MyUI", ["Olives/OObject"], function (OObject) {
  function myUIConstructor() {
    this.template = "<p>Hello world!</p>";
  }
	
  return function myUIFactory() {
    myUIConstructor.prototype = new OObject;
    return new myUIConstructor;
  }
});

###Using the previously defined UI

require(["MyUI"], function (MyUI) {
  var myUI = new MyUI;
  // You can change its place anytime
  myUI.place(document.body);
});

###Any OObject has a simple model which is an Emily Store

var UI = new OObject;
// The model property is an Emily Store
UI.model.set("Hello", "world!");
UI.model.get("Hello"); // world!

But it can be replaced with any subtype of an Emily Store, such as a LocalStore. See LocalStore for how it works.

var UI = new OObject(new LocalStore);

###Defining a UI's view from an HTML page

But you can also define the view in an html page and create your UI from it

<div class="page">
	<p>Hello world!</p>
</div>

You can then turn it into a UI, its template property will get set and it will also be considered as already placed.

var UI = new OObject;
 
// Alive will simply use the DOM to create a UI.
UI.alive(".page p"); // Alive uses document.querySelector so you can use any CSS3 selector
 
UI.template; // <p>Hello world!</p>

###Connecting the view with controller

Interactions between views and controllers are Plugins. Olives comes with built-in plugins:

• Model-plugin: A complete plugin that double-way binds you view with your model. It has pagination too!
• Event-plugin: For executing actions on user events.
• UI-plugin: For placing UIs in UIs.