fig

async view for node, and the web

npm install fig
82 downloads in the last month

Fig is a cross-platform view library built for beanpoll, and mesh.

Why?

  • To render single-page applications as static websites.
  • Allows search engines to crawl SPA's. No need to write a second, static website.

Example:

in your bootstrap script:

var beanpoll = require('beanpoll'),
haba         = require('haba'),
router       = beanpoll.router(),
loader       = haba.loader();

loader.
options(router).
params({
  publicDir: __dirname + "/path/templates"
}).
require('fig').
require(__dirname + "/website.js").
load();

In your website.js script: (TODO)

router.on({

  'push -pull fig': function() {

  }

});

Views

Base View

The default concrete view class.

view.setup(options)

Sets the view up with configuration options

view.instructions()

Initialization instructions used to load the view. Needed for loading

view.render()

Called to render the view - display it to the screen.

view.listen()

Called after a view has been rendered.

final view.update(force)

Call this if anything changes in the view, such as view data. This method calls: render, listen, then updateChildren.

view.$

View level accessor.

view.addChild(child)

Adds a child view

view.removeAllChildren()

Removes all chidren from the view

Example


var views = require('fig').views;


var FigView = views.View({

   /**
    * event bindings 
    */

   'bindings': {
       'click #some-button': 'onButtonClick'
   },


   /**
    * Sets up the view - called from the constructor
    */


   'override setup': function(options) {
       this._super(options);

       //called on constructor
   },

   /**
    */

    'override listen': function(options) {
        this._super(options);

        //listen to stuff
    },

    /**
     */

    'override instructions': function() {
        return this._super().concat('_loadSomeInitData');
    },

   /**
    */


   '_loadSomeInitData': function(next) {
        setTimeout(next, 1000);
    },


   /**
    */

   'onButtonClick': function() {
       //do stuff
   }
});

Item View

Item view which hooks up to a remote item viw beanpoll

Collection View

Collection view which hooks up to a remote collection.

Template View

Template view which expects a template file, or template element.

ItemTemplate

Template + Item view

CollectionTemplate

Template + Collection view

SelectView

Select Option view (TODO)

npm loves you