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.

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



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: [


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.


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.


None (for now).



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'


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).

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)).

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

pageSize: Page size for list and cards views.


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.


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