Class: App

Constructor

new App(optionsopt)

Parameters:

Name	Type	Attributes	Default	Description
options	Object	<optional>	{}	Properties Name Type Attributes Default Description dom HTMLElement <optional> div

Source:

• App.js, line 74

Example

Set up a basic user administration page

import { AdminApp } from '{some path}/App.js'
import { UpdateBioComponent } from './UpdateBioComponent.js'
import { ResetPasswordComponent } from './ResetPasswordComponent.js'
import { UpdatePortraitComponent } from './UpdatePortraitComponent.js'
import { UserModel } from './UserModel.js'

class AdminApp extends App {
	constructor(){
		// Get user model (see DataObject, DataModel, and DataCollection docs)
		this.dataObject = new UserModel()
		this.dataObject.fetch().catch(err => { ... handle error ... })

		// Set up the masthead
		this._masthead = new MastheadComponent(
			undefined,
			{
				brand: 'Your Brand',
				brandAnchor: '/',
				menuItems: [
					{ name: 'Bio', anchor: '#' },
					{ name: 'Password', anchor: '#password' },
					{ name: 'Portrait', anchor: '#portrait' }
				]
			}
		).appendTo(this)

		// Set up three sub-views with Components (see Component docs)
		this._bioComponent = new UpdateBioComponent(this.dataObject).appendTo(this)
		this._passwordComponent = new ResetPasswordComponent(this.dataObject).appendTo(this)
		this._portraitComponent = new UpdatePortraitComponent(this.dataObject).appendTo(this)

		// Set up the Router (see Router docs)
		this._router = new Router()
		this._router.addRoute(/^$/, 'default')
		this._router.addRoute(/^password$/, 'password')
		this._router.addRoute(/^portait$/, 'portrait')
		router.addListener('blog-app', (routeName) => {
			switch (routeName) {
				case 'default':
					this._bioComponent.show()
					this._passwordComponent.hide()
					this._portraitComponent.hide()
					break
				case 'password':
					this._bioComponent.hide()
					this._passwordComponent.show()
					this._portraitComponent.hide()
					break
				case 'portrait'
					this._bioComponent.hide()
					this._passwordComponent.hide()
					this._portraitComponent.show()
					break
			}
		})
	}	
}