Plugins

iugo architecture

The Iugo prototype includes two stacks used for plugins, the defaultViewcontrollers array and the initializers array. The core functionality of iugo (if you get just iugo.js from the repository) is effectively an event system which fires when a model is updated. The flow, is:

1. When the constructor is called each of the methods in the initializers array are called - these functions may be used to prepare the DOM or set default values in the model.
2. When a value is set in the model iugo first checks for a matching view-controller (as supplied to the constructor) and executes that function.
3. After the view-controller, iugo fires each function from the defaultViewcontrollers stack.

iugo vs iugo MVVC

iguo MVVC (the file you would download from the homepage) includes both the base iugo class and a plugin, called bind_by_class. The bind_by_class plugin deals with the DOM binding as described in the documentation page. Most of the documentation, in fact, refers to this combination of iguo.js and iugo-bind_by_class.js; at a high level the name "iugo" may refer to the MVVC package as well as just the constructor.

Developing plugins

To develop a plugin you must include either iugo.js, or iugo-mvvc.js (which contains iugo.js). A plugin file should be a Javascript file which adds functions to one or both of the plugin stacks. In that way, a user could include your plugin file after iugo.js to add the plugins functionality to their code.

A good place to start when developing a plugin is to inspect iugo-bind_by_class.js, which contains both types of plugin.

initializers stack

One can define an initializer by adding a function to the stack:

$iugo.$internals.MVVC.prototype.initializers.push(function(view) {});

An initializer function is passed one argument, the instance of Iugo's view, which is a DOM node.

The bind_by_class plugin, as an example, adds an initializer to swap occurrences of ${path.to.value} variables for <span> tags, annotated to be bound to the relevant value.

defaultViewcontrollers stack

One can define a default view-controller by adding a function to the stack:

$iugo.$internals.MVVC.prototype.defaultViewcontrollers.push(function(property, value, view) {});

A default view-controller function is passed three arguments, the name of the property which has been updated, the new value of the property and the view, which is a DOM node.

The bind_by_class plugin, as an example, adds a default view-controller to search the view for nodes which need to be bound to the new value of the property.