compo-views

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

Using Ruta.

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.

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 */ }
}

• Attributes

• Signals

• Slots

• Components

  Input Elements

  • View
  • Progress
  • Notification

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

ViewManager Component emits signals to current View on various states.

• viewActivity(type)

  Types:

  • start
  • end

• viewActivation

• viewDeactivation

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

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

View template is placed inside the View component

• 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 component is always rendered. Current implementation shows the progress element when current View is loading.

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

• /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...

npm test

©️ MIT - Atma.js Project