Controller :: Evolutility-UI-jQuery

Still under construction, Evolutility-UI-jQuery controller is not the usual "C" in "MVC". Very likely you will want to write your own (at least for now).

With Evolutility you can decide what to automate and what to code yourself.

You can instantiate any view directly and write your own controller to manage it.
You can instantiate a toolbar which will manage all views for a specific entity (Backbone model and collection).
You can instantiate an app which will manage several toolbars which will each manage a set of views.

App and Toolbar use the same UI-models as the views.

App

The class "Evol.App" handles routing for all views for several entities. For each entity it creates a toolbar which manages the views for that entity.

new Evol.App({
    el: $('#evol'),
    uiModels: [
        uiModels.todo,
        uiModels.contact,
        uiModels.winecellar,
        uiModels.comics
    ]
});

Options

el: DOM element to hold the views.

uiModels: Array of UI-models.

style: Bootstrap style for panels (possible values: "panel-default" (grey), "panel-primary" (dark blue), "panel-success" (green), "panel-info" (light blue), "panel-warning" (yellow), "panel-danger" (red)).

useRouter: Set to true for Evolutility-UI-jQuery to automatically handle routing.

pageSize: Page size for list and cards views.

Methods

setRoute(id, triggerRoute): Change the route and display the corresponding view.

setEntity(entityName, view, options): Change the entity and display the corresponding entity in the currently selected view.

Events

None (for now).

Toolbar

The toolbar manages all views for a specific UI-model. It displays different options based on the context.

Toolbar for One model:

Toolbar for Many models:

new Evol.Toolbar(
    el: $('#Evol'),
    uiModel: uiModel,
    model: myModel,
    collection: myCollection,
    titleSelector: '#title'
);

Options

defaultViewOne: Default view when looking at a single model (possible values "browse", "edit", "mini", json").

defaultViewMany: Default view when looking at a collection (possible values "list", "cards", "bubbles", charts").

model: Backbone model for the toolbar to manage.

collection: Backbone collection for the toolbar to manage.

readonly: Provides read-only interaction (no update or delete).

titleSelector: Selector for the title element outside of the view (example: '#title').

pageSize: Page size for list and cards views.

Methods

render(): Render the toolbar and the default view.

setData(data): Set data.

getData(): Get data.

setView(viewName): Set the current view (possible values: "browse", edit", "mini", "list"...).

showFilter(): Expend the filter panel.

browse(direction): Moves to the next or previous record.

SaveItem(saveAndAdd): Save the currently edited record (if it passes validation).

newItem(): Create a new record.

deleteItem(): Delete the currently edited or browsed record.

clearMessage(): Clear the header message.

setMessage(): Set the value of the header message.

Events

item.added, item.saved, item.deleted: Triggered when a record is added/saved or deleted.

filter.change: Triggered when filter conditions are changed.

toolbar.X: Triggered when a toolbar button is clicked. X = toolbar button Ids in [ 'new', 'del', 'filter', 'export', 'browse', 'edit', 'mini', 'json', 'list', 'cards', 'bubbles', 'charts', 'prev', 'next' ].

Evolutility-UI-jQuery at GitHub