owljs
Options
All
  • Public
  • Public/Protected
  • All
Menu

owl.js

Backbone-like frontend library

Build Status Coverage Status Stories in Ready

Ask a question in gitter.

Install

Bower

bower install owl.js

npm

npm install owl.js

Features

Languages: ES5, ES6, TypeScript.

Modules: CommonJS, amd.

Libraries: React.

Examples

To start examples server

cd examples
npm start

Concept

owl.js is simple library similar to backbone.js, without dependency on underscore.js and jQuery. If you know backbone.js you mostly know owl.js.

The library uses MVC as main pattern. owl.Model is responsible for representing data from server based on REST architecture. owl.View is responsible for rendering view it can use any template engine to do it or generate DOM manually. owl.Controller is responsible for business logic.

Also there is few classes out of the main pattern.

owl.Router is created to manage pages based on URL. It contains records named routes. Each route contains path and a controller that will be called for specified path.

owl.Collection is an array of owl.Models it is created to represent model sets.

In is not necessary to use all of those classes, for example you can use React components instead of owl.View.

Development

Run unit tests

karma start

or

npm test

Index

Modules

Modules

owl

owl:

ajax

ajax:

error

  • error(xhr: XMLHttpRequest): void
  • Default event error listener

    Parameters

    • xhr: XMLHttpRequest

    Returns void

removeHeader

  • removeHeader(key: string): void
  • Removes a header

    Parameters

    • key: string

    Returns void

request

setHeader

  • setHeader(key: string, value: string): void
  • Sets a header for each request

    Parameters

    • key: string
    • value: string

    Returns void

toJsonString

  • toJsonString(data: Object): string
  • Stringify an object

    Parameters

    • data: Object

    Returns string

toQueryString

  • toQueryString(data: Object): string
  • Makes query string from data

    Parameters

    • data: Object

    Returns string

history

history:

getDefaultRouter

  • getDefaultRouter(): Object

getHash

  • getHash(): string

getLocation

  • getLocation(): string

getOption

  • getOption(name: string): any

getResolve

  • getResolve(resolveName: string): Function
  • Gets resolve by name

    Parameters

    • resolveName: string

    Returns Function

getRouter

  • getRouter(path: void): Object

init

  • init(options: Object): void
  • Makes request to the server

    Parameters

    • options: Object

    Returns void

isStarted

  • isStarted(): boolean

navigate

  • navigate(path: string): void
  • Adds new item to the navigation history

    Parameters

    • path: string

    Returns void

off

  • off(event: string, listener: Function): void
  • Removes event listener

    Parameters

    • event: string
    • listener: Function

    Returns void

on

  • on(event: string, listener: Function): void
  • Adds event listener

    Parameters

    • event: string
    • listener: Function

    Returns void

open

removeResolve

  • removeResolve(resolveName: string): void
  • Removes resolve by name

    Parameters

    • resolveName: string

    Returns void

removeRouter

  • removeRouter(path: string): void

replace

  • replace(path: string): void
  • Replaces current item in the navigation history

    Parameters

    • path: string

    Returns void

setDefaultRouter

  • setDefaultRouter(router: Object): void

setHash

  • setHash(hash: string): void

setResolve

  • setResolve(resolveName: string, resolveCallback: Function): void
  • Sets resolve

    Parameters

    • resolveName: string
    • resolveCallback: Function

    Returns void

setRouter

  • setRouter(path: string, router: Object): void
  • Sets router by name

    Parameters

    • path: string
    • router: Object

    Returns void

start

  • start(): void

stop

  • stop(): void

trigger

  • trigger(event: string): void

util

util:

clone

  • clone(object: Object, isRecursive: boolean): Object
  • Clones an object

    Parameters

    • object: Object
    • isRecursive: boolean

    Returns Object

extend

  • extend(firstObject: Object, secondObject: Object, isRecursive: boolean): Object
  • Extends and object

    Parameters

    • firstObject: Object
    • secondObject: Object
    • isRecursive: boolean

    Returns Object

Collection

Collection:

owl.Collection

constructor

  • new Collection(data: Array<Object>, options: Object): Collection

clear

  • clear(): void

fetch

get

  • get(index: number): Model

getData

  • getData(): Array<Object>

getLength

  • getLength(): number

getModels

  • getModels(): Array<Model>

off

  • off(event?: string, listener?: Function): void
  • Removes event listener

    Parameters

    • Optional event: string
    • Optional listener: Function

    Returns void

on

  • on(event: string, listener: Function): void
  • Adds event listener

    Parameters

    • event: string
    • listener: Function

    Returns void

setData

  • setData(data?: Array<Object>): void

trigger

  • trigger(event: string): void

update

  • update(index?: number): void
  • Updates collection internal data value based on index In case when index is not defined updates whole collection

    Parameters

    • Optional index: number

    Returns void

Controller

Controller:

owl.Controller

constructor

destroy

  • destroy(): void
  • Removes all data created by controller Will be called before navigate to new page

    Returns void

init

  • init(): void
  • Init a controller Will be called after navigate to new page If action is defined in route it will be called instead of init

    Returns void

Model

Model:

owl.Model

constructor

  • new Model(data: Object, options: Object): Model

clear

  • clear(): void

destroy

fetch

get

  • get(name: string): any
  • Gets attribute by name

    Parameters

    • name: string

    Returns any

getCollection

getCollectionIndex

  • getCollectionIndex(): number

getData

  • getData(): Object

off

  • off(event?: string, listener?: Function): void
  • Removes event listener

    Parameters

    • Optional event: string
    • Optional listener: Function

    Returns void

on

  • on(event: string, listener: Function): void
  • Adds event listener

    Parameters

    • event: string
    • listener: Function

    Returns void

patch

  • patch(data: Object, query?: Object, path?: String): Promise
  • Partially updates model

    Parameters

    • data: Object
    • Optional query: Object
    • Optional path: String

    Returns Promise

save

set

  • set(name: string, value: any): void
  • Sets attribute value by name

    Parameters

    • name: string
    • value: any

    Returns void

trigger

  • trigger(event: string, subEvents: Array<string>): void
  • Triggers events

    Parameters

    • event: string
    • subEvents: Array<string>

    Returns void

triggerSingle

  • triggerSingle(event: string): void
  • Trigger single event

    Parameters

    • event: string

    Returns void

update

  • update(data: Object, query?: Object): Promise
  • Updates local data and saves model

    Parameters

    • data: Object
    • Optional query: Object

    Returns Promise

Promise

Promise:

Promise should refer to any Promises/A+ library

constructor

  • new Promise(resolve: Function, reject: Function): Promise

catch

  • catch(callback: Function): void

then

  • then(callback: Function): Promise

Router

Router:

owl.Router

constructor

  • new Router(routes: Array<Route>, defaultRoute: Route, controller?: object): Router

addRoute

  • addRoute(route: Route): void

getController

  • getController(): object

getDefaultRoute

  • getDefaultRoute(): Route

getRoute

  • getRoute(path: string): Route

open

resolve

run

  • run(path: string, route: Route, resolveResult: Array<any>): Function
  • Runs the route

    Parameters

    • path: string
    • route: Route
    • resolveResult: Array<any>

    Returns Function

    Function to destroy controller

setController

  • setController(controller: object): void
  • Sets controller

    Parameters

    • controller: object

    Returns void

setDefaultRoute

  • setDefaultRoute(route: Route): void

View

View:

owl.View

constructor

collection

collection: Collection

controller

controller: Controller

el

el: Element

elements

elements: object

Type declaration

  • [key: string]: any

model

model: Model

template

template: Function

callEventListener

  • callEventListener(method: string, element: Element, event: Event): void
  • Calls event listener

    Parameters

    • method: string
    • element: Element
    • event: Event

    Returns void

find

  • find(selector: string): Element
  • Finds element in current component by selector

    Parameters

    • selector: string

    Returns Element

findAll

  • findAll(selector: string): NodeList
  • Finds all elements in current component by selector

    Parameters

    • selector: string

    Returns NodeList

getEl

  • getEl(): Element
  • Gets DOM element related to the view

    Returns Element

getMatchingElement

  • getMatchingElement(element: Element, selector: string): Element
  • Gets element matching selector

    Parameters

    • element: Element
    • selector: string

    Returns Element

remove

  • remove(): void

render

  • render(data?: Object): void
  • Calls template function and adds result to element

    Parameters

    • Optional data: Object

    Returns void

update

  • update(el?: Element): void
  • Update events and element

    Parameters

    • Optional el: Element

    Returns void

updateElements

  • updateElements(el: Element): void
  • Update element

    Parameters

    • el: Element

    Returns void

updateEvents

  • updateEvents(el: Element): void

ModelOptions

ModelOptions:

Model options

collection

collection: Collection

collectionIndex

collectionIndex: number

RequestSettings

RequestSettings:

Request settings

data

data: Object

type

type: string

url

url: string

Route

Route:

Router

action

action: string

callback

callback: Function

controller

controller: object

Type declaration

params

params: Array<Object>

path

path: string

regexp

regexp: RegExp

resolves

resolves: Array<Function>

ViewOptions

ViewOptions:

View options

className

className: string

collection

collection: Collection

controller

controller: Controller

el

el: Element

events

events: object

Type declaration

  • [key: string]: string

model

model: Model

template

template: Function

define

  • define(name: string, builder: Function): void
  • Defines a module by builder. Builder should return an object.

    Parameters

    • name: string
    • builder: Function

    Returns void

require

  • require(name: string): Object
  • Requires a module. First time will call builder and will return an object created by builder. Next calls will return already created object.

    Parameters

    • name: string

    Returns Object

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc