CustomView

CustomView

Creating a new CustomView is as simple as:

1. Create a new directory under lib/custom-view as well as a component.json manifest file. Remember: the name must match the directory name.

2. Scripts should contain a view.js file and it should be the main file as well in the manifest.

3. Template should contain a template.jade file. This template should contain at its top level a div element (or something alike) with a class name or id identifying the component.

4. Styles should contain a styles.styl file with a top level container element matching the class name or id set on template for setting styles inside that component.

TODO: write a script to do all the above stuff

The view.js file should contain something like this:

/**
 * Module dependencies.
 */

var dep1 = require('dep1');
//...etc
var template = require('./template');

/**
 * Expose CustomView
 */

module.exports = CustomView;

/**
 * Creates a CustomView
 * domifies the template inside `this.el`
 */

function CustomView() {
  if (!(this instanceof CustomView)) {
    return new CustomView();
  };

  View.call(this, template);
}

/**
 * Inherit from `View`
 */

View(CustomView);

/**
 * Turn on event bindings
 * called when inserted to DOM
 */

CustomView.prototype.switchOn = function() {
  this.bind('click', 'a.btn', 'onclick');
}

/**
 * Turn off event bindings
 * called when removed from DOM
 */

CustomView.prototype.switchOff = function() {
  this.unbind('click', 'a.btn', 'onclick');
}

And that's it.

The same goes for FormView