Views Component

ViewManager {
	View route='a' default { /* template */ }
	View route='b' path='./foo.mask';
}

Routing

Using Ruta.

Resolve routes. The ViewMap.

First of all, ViewManager gets the list of all available routes from different sources:

• Route attributes of children Views.
• By an expression from current model, scope, ctx or ancestors.

Parameters

Current route parameter values are passed to the rendered view.

ViewManager {
	View route='/users' { /* list template */ }
	View route='/user/:id/edit' { /* edit template */ }
	View route='/user/create' { /* create template */ }
}

ViewManager

• Attributes

• Signals

• Slots

• Components

  Input Elements

  • View
  • Progress
  • Notification

ViewManager Attributes

| Name | Type | Default | Description | |------|------|---------|-------------| |base |string |current location| Base location, from which remote templates are loaded | |viewmap|string |empty | Expression to get the viewmap | |routing|boolean |true | Should update the window location with HistoryAPI when navigating to the view | |nested |boolean |true | Depends on parent ViewManager |

Api

• navigate(path: string):Promise<Route> Open View for the path, and hides current if any.

Signals

ViewManager Component emits signals to current View on various states.

• viewActivity(type)

  Types:

  • start
  • end

• viewActivation

• viewDeactivation

Slots

• viewNavigate(path:string) Signal alias for navigate method.

Components

ViewManager defines some nested components. So you can override or extend each.

View

View template is placed inside the View component

Attributes

| Name | Type | Default | Description | |------|------|---------|-------------| |default |boolean |false | If no route is matched, this view will be shown to user | |detach |boolean |true | After the view was hidden, detach the view from DOM. | |recycle |boolean |false | Completely destroy the view on hide and re-render the next time it gets visible . |

Methods

• hide:Promise

  Hides the view with display:none style.

  Note that it will be also detached from DOM

• show:Promise

  Attaches, if detached, and shows the view.

Both methods can be overridden to perform some animations or other behavior.

Progress

Progress component is always rendered. Current implementation shows the progress element when current View is loading.

Notification

Notification component is always rendered. Current implementation shows the notification messages, on errors etc.

Examples

• /examples

# install atma toolkit
npm install atma -g
# run examples static server
npm run examples

# navigate `http://localhost:5777/examples/tabs/sync.html`
# and many more...

Test

npm test

:copyright: MIT - Atma.js Project