Module bauplan.view

Generic view

var BauplanView = require("bauplan.view");

or as part of the Bauplan bundle

var Bauplan = require("bauplan");
var BauplanView = Bauplan.View;

To create and instantiate a new view class

var FooView = Bauplan.View.extend({
    name: "foo"
});
var fooviewinstance = new FooView();

View templates

In the example above, FooView automatically uses a template named "foo.view".

To create a view that uses a non-default view template

var FooTemplateView = Bauplan.View.extend({
    name: "foo",
    template: "bar.view"
});

View models

To create a view that uses the bar model

var FooModelView = Bauplan.View.extend({
    name: "foo",
    model: Bar
});

To create a view that requires a more complex context than simply the model view’s attributes

var FooContextView = Bauplan.View.extend({
    name: "foo",
    model: Bar,
    context: function () {
        var attributes = _.extend({}, someOtherObject, this.model.attributes);
        delete attributes.notneeded;
        return attributes;
    }
});

NB. this is standard Thorax behaviour

Saving the view model

Without any further intervention, a view form will, when submitted, save the view model and then redirect to the previous route. But often, that will not be sufficient.

NB. views do not need to have a form and do not need to save

Post-save redirecting

To create a view that redirects to the "bar" route on success and "baz" on error

var FooRedirectView = Bauplan.View.extend({
    name: "foo",
    successRoute: "bar",
    errorRoute: "baz"
});

or alternatively

var FooRedirectAltView = Bauplan.View.extend({
    name: "foo",
    saveOptions: {
        success: {
            route: "bar"
        },
        error: {
            route: "baz"
        }
     }
});

Post-save callbacks

To create a view that calls bar() on success and baz() on error

var FooCallbackView = Bauplan.View.extend({
    name: "foo",
    successCallback: bar,
    errorCallback: baz
});

or alternatively

var FooCallbackAltView = Bauplan.View.extend({
    name: "foo",
    saveOptions: {
        success: {
            callback: bar
        },
        error: {
            callback: baz
        }
    }
});

Saving without propagating to endpoint

To create a view that does not save the model to the server and executes its success handler immediately

var FooNoSaveView = Bauplan.View.extend({
    name: "foo",
    saveOptions: {
        save: false
    }
});

Overriding default save and outcome handling methods

To create a view that has custom methods for saving and dealing with the outcomes

var FooCustomMethodsView = Bauplan.View.extend({
    name: "foo",
    saveForm: function (options) { … },
    onSuccess: function (model, response, options) { … },
    onError: function (model, response, options) { … }
});

Preventing view refreshing

To create a view that does not re-render when its model updates

var FooNoRenderOnUpdateView = Bauplan.View.extend({
    name: "foo",
    renderUpdate: false
});

Instance methods of note

Checking and enabling the view form
- bauplan.view#validateAllControls
- bauplan.view#enableForm
- bauplan.view#disableForm
Accessing child control views of the view
- bauplan.view#getControl
- bauplan.view#addControlError
View navigation
- bauplan.view#previous
Listens to Events
Returns

BauplanView

Type
constructor

Extends

  • Thorax.View

Requires

  • lodash
  • thorax
  • larynx
Source:
See:

Members

(inner) defaultEvents

Default events to mix in with events if overridden

Source:

(inner) initialValues :boolean

Type:
  • boolean
Default Value:
  • true
Source:

(inner) name :string

Type:
  • string
Default Value:
  • default
Source:

Methods

(private, static) constructor(arguments)

Sets:

  • layoutmodel
  • template (defaulting to name + ".view")
  • controlmodel
Parameters
Name Type Description
arguments arguments

Applied to Thorax.View
Source:

(static) extend(options, renderUpdateopt) → {constructor}

Parameters
Name Type Attributes Default Description
options object

Constructor options

Properties
Name Type Attributes Default Description
name string default

View name
template string <optional>

View template - defaults to view name
model contructor <optional>

View model or collection. An object or array can be passed instead to create respectively a model or collection automatically
saveSelector string <optional>
 [name=action-submit]

CSS selector to match save|submit element
cancelSelector string <optional>
 [name=action-cancel]

CSS selector to match cancel element
initialValues boolean <optional>
 true

Denotes that the form’s initial values should not constitute a form in a valid state
context function <optional>

Explicitly override Thorax.View.prototype.context
saveForm function <optional>

Explicitly override default saveForm method
onSuccess function <optional>

Explicitly override default onSuccess method
onError function <optional>

Explicitly override default onError method
saveOptions object <optional>

Options to pass to post-success handler
saveOptions.​save boolean <optional>
 true

Save the model to the endpoint. If false, skip straight to the onSuccess method
saveOptions.​success object <optional>

Success handler options
saveOptions.​success.​route string <optional>

Success redirect route if successRoute has not been defined
saveOptions.​success.​callback function <optional>

Success callback if successCallback has not been defined
saveOptions.​error object <optional>

Error handler options
saveOptions.​error.​route string <optional>

Error redirect route if successRoute has not been defined
saveOptions.​error.​callback function <optional>

Error callback if errorCallback has not been defined
successRoute string <optional>

Explicit route to redirect to post success
errorRoute string <optional>

Explicit route to redirect to post error
successCallback function <optional>

Explicit callback post success
errorCallback function <optional>

Explicit callback error
renderUpdate boolean <optional>
 true

Whether to render view when the model updates
Source:
Returns

View

Type
constructor

addControlError(name, error, optionsopt)

Display an error on the named control

Parameters
Name Type Attributes Description
name string

Control name
error error

Error to display
options object <optional>
Source:

disableForm()

Disables the view form

Source:

enableForm(enable, force)

Enables the view form

Parameters
Name Type Description
enable boolean

Whether to enable or disable form
force boolean

Whether to force the state chnge
Source:

errorCallback(model, response, options)

Default error callback method

Displays any error message returned, using it as an internationalisation key if it exists

Disables view form submission

Parameters
Name Type Description
model model

Model/collection in a state reflecting the outcome
response XHR

The full jqXHR response object
options object

Additional options to be passed to the callback function
Source:

getControl(name) → {view}

Returns the named control view that is a child of the current view

Parameters
Name Type Description
name string

Control name
Source:
Returns

ControlView

Type
view

onError(model, response, options)

Error wrapper method for bauplan.view#onHandle

Parameters
Name Type Description
model model

Model/collection in a state reflecting the outcome
response XHR

The full jqXHR response object
options object

Additional options to be passed to the callback function
Source:

onHandle(type, model, response, optionsopt)

Generic handling of success/error outcomes when saving a model or collection instance

[success|error]Route

[success|error]Callback

Parameters
Name Type Attributes Default Description
type string success|​error

Type of result
model model

Model/collection in a state reflecting the outcome of the save operation
response XHR

The full jqXHR response object
options object <optional>

Additional options to be passed to the callback function
Source:

onSuccess(model, response, options)

Success wrapper method for bauplan.view#onHandle

Parameters
Name Type Description
model model

Model/collection in a state reflecting the successful outcome
response XHR

The full jqXHR response object
options object

Additional options to be passed to the callback function
Source:

previous(eopt)

Navigate app to previous route view

Parameters
Name Type Attributes Description
e event <optional>

DOM event
Source:

saveForm(options)

Optionally (by default) save the form’s model and then invoke the handler method for the outcome

Parameters
Name Type Description
options object
Source:

validateAllControls(optionsopt)

Validates all view controls and enables or disables the form accordingly

Parameters
Name Type Attributes Description
options object <optional>
Properties
Name Type Attributes Description
update boolean <optional>

Whether to update the controls
validate boolean <optional>

Whether to validate the controls
Source:

(inner) events()

Basic events for BauplanView

Source:

(inner) populate()

Suppresses Thorax.View.prototype.populate since control views provide that functionality

Source:

(private, inner) setDirtyModel()

Creates a parallel instance to track changes

Source:

Events

click:cancelSelector

When user cancels the view form

  • discards changes
  • loads previous view
Source:
Listeners of This Event

click:saveSelector

When user attempts to submit the view form

  • prevents double submission
  • checks whether it is in a submittable state
  • provides feedback that it is being submitted
  • submits it
Source:
Listeners of This Event

on:rendered

Validate all the controls post view rendering

Source:
Listeners of This Event

window:on:click

Un-faux-focuses elements and removes focus on any previously focused control

Applies to a, button, [type=submit], label

Source:

window:on:mouseenter

Faux-focuses elements as the mouse moves over them and removes focus from any focused control of kinds, input[type=text], input[type=password], textarea

This gets around blur events causing 2 clicks to be required on buttons

Applies to a, button, [type=submit], label

Source:

window:on:mouseleave

Un-faux-focuses elements and resets focus on any previously focused control

Applies to a, button, [type=submit], label

Source: