Unchained UI

Views UI Component

Usage

importViewsfrom'uc-views';importPostfrom'./views/post';importPagefrom'./views/page';// ... init your app ...constviews=newViews({routes: [['post','/post(/:slug)',Post],['page','/(:page)',Page]]}).appendTo(document.body);

@import'uc-views/style.css';

This component follows Unchained UI guidelines.

Constructor options:

• routes array, routes and views mapping. Each element is an array. [<name>, <pattern>, <ViewClass> [, AuthenticatedViewClass]]. If AuthenticatedViewClass is present, the views will show it instead of the ViewClass when app is authenticated. Check the uc-app for more info.
• onChange — function, callback will be called when view is changed.
• el — HTMLElement, the views container. If ommited the div.views is created.
• rootEl — HTMLElement, default html, top element to apply active view classes.
• rootPath - string, root path

Methods

remove()

Removes the views.

View

The View is a simple JavaScript class. The only requirements are:

• el – HTMLElement, the view element.
• name – string, the name of the view.
• state - method to receive the current state.

The View can have the following methods.

willOpen, didOpen, willClose, didClose. Will- methods are asynchronous.

Example:

import{create}from'uc-dom';constPage=function(){this.el=create('div.view.view-page');}Page.prototype={name: 'Page',state: function(state,cb){console.log('Page state',state);cb();// here we can return an error: cb(new Error());// or replace the history state: cb(null, '/newurl');},willOpen: function(cb){console.log('page will open');cb();},didOpen: function(){console.log('page did open');},willClose: function(cb){console.log('page will close');cb();},didClose: function(){console.log('page did close');}}

License MIT

© velocityzen