Sidecar API Reference

Class: View/Layout

View/Layout

new View/Layout()

The Layout Object is a definition of views and their placement on a certain 'page'.

Use Sidecar/View/ViewManager to create instances of layouts.

A Quick Guide for Creating a Layout Definition

Creating Layouts is easy. All it takes is adding the appropriate metadata file. Let's create a layout called SampleLayout.

The Layout File and Directory Structure

Layouts are located in the modules/MODULE/metadata/layouts folder. Add a file called SampleLayout.php in the folder and it should be picked up in the next metadata sync call.

The Metadata

$viewdefs['MODULE']['PLATFORM (portal / mobile / base)']['layout']['samplelayout'] = array(
    'type' => 'columns',
    'components' => array(
        0 => array(
            'layout' => array(
            'type' => 'column',
            'components' => array(
                array(
                    'view' => 'list',
                ),
                array(
                    'view' => 'list',
                    'context' => array(
                        'module' => 'Leads',
                    ),
                ),
            ),
        ),
    ),
);

As you can see we are defining a column style layout with two subcomponents: A normal list view of the MODULE, and also a list view of Leads.

Accessing the New Layout

The last step is to add a route in the Router to display the new layout. // TODO: Custom routes?

Extends

Members

<protected> _componentsMeta :Array

Holds the components metadata in case if it is a lazy loaded layout. This property should be used to to initialize components manually.

Type:
  • Array

collection :Data/BeanCollection

Reference to the collection this component is bound to.

Type:
Inherited From:

context :Core/Context

Reference to the context (required).

Type:
Inherited From:

label :string

Layout Label.

Type:
  • string

layout :View/Layout

Reference to the parent layout instance.

Type:

meta :Object

Component metadata (optional).

Type:
  • Object
Inherited From:

model :Data/Bean

Reference to the model this component is bound to.

Type:
Inherited From:

module :string

Module name (optional).

Type:
  • string
Inherited From:

name :string

Layout Name.

Type:
  • string

options :Object

Backbone view options.

Type:
  • Object
Inherited From:
Deprecated:
  • Deprecated since 7.8.0 since this is no longer supported by Backbone.

Methods

<protected> _addComponentsFromDef( [components] [, context] [, module])

Creates and adds components to the current layout.

Calls View/Layout#addComponent to help add components. Calls View/Layout#createComponentFromDef to help create components.

Parameters:
Name Type Argument Default Description
components Array <optional>
 []

The components to be created.
context Object <optional>

Context to pass to the new components.
module string <optional>

Module to create the components from.

<protected> _dispose()

Disposes a layout.

Disposes each of this layout's components and calls the View/Component#_dispose method of the base class.

Overrides:

<protected> _hide()

Override this method to provide custom show logic.

Inherited From:
Overrides:

<protected> _placeComponent(component)

Places layout component in the DOM.

Default implementation just appends all the components to itself. Override this method to support custom placement of components.

Parameters:
Name Type Description
component View/View | View/Layout

View or layout component.

<protected> _render()

Renders all the components.

Overrides:
Returns:

The instance of this layout.

Type
View/Layout

<protected> _show()

Override this method to provide custom show logic.

Inherited From:
Overrides:

<protected> _super(method [, args])

Retrieves and invokes parent prototype functions.

Requires a method parameter to function. The method called should be named the same as the function being called from.

Examples:

  • Good:
({
    initialize: function(options) {
        // extend the base meta with some custom meta
        options.meta = _.extend({}, myMeta, options.meta || {});
        // Only call parent initialize from initialize
        this._super('initialize', [options]);
        this.buildFoo(options);
    }
});
  • Bad:
({
    initialize: function(options) {
        // extend the base meta with some custom meta
        options.meta = _.extend({}, myMeta, options.meta || {});
        // Calling a function like buildFoo from initialize is incorrect. Should call directly on this
        this._super('buildFoo',[options]);
    }
});
Parameters:
Name Type Argument Description
method string

The name of the method to call (e.g. initialize, _renderHtml).
args Array <optional>

Arguments to pass to the parent method.
Inherited From:
Returns:

The result of invoking the parent method.

Type
*

<protected> _wrapInitialize(options)

Wraps the initialize method to delegate the events on the element, after it initializes.

Parameters:
Name Type Description
options Object

The Backbone.View initialization options.
Inherited From:

addComponent(component, def)

Adds a component to this layout.

Parameters:
Name Type Description
component View/Layout | View/View

Component (view or layout) to add.
def Object

Metadata definition.

before(name, callback [, context])

Adds a callback/hook to be fired before an action is taken. If that callback returns false, the action should not be taken.

The following example binds a callback function and passes the scope from the view component to use in that callback:

model.before('save', this.doSomethingBeforeSave, this);

Multiple space-separated event names can be bound to a single callback:

view.before('save dispose', this.callback, this);

This method also supports an event map syntax, as an alternative to positional arguments:

this.before({
    render: this.doSomethingBeforeRender,
    dispose: this.doSomethingBeforeDispose,
});
Parameters:
Name Type Argument Description
name string | Object

Event(s) to trigger before. Accepts multiple space-separated event names or an event map.
callback function

Function to be called.
context Object <optional>

Value to be assigned to this when the callback is fired.
Inherited From:
Mixes In:
Returns:

Instance of this class.

Type
Object

<abstract> bindDataChange()

Binds data changes to this component.

Inherited From:

closestComponent(name)

Traverses upwards from the current component to find the first component that matches the name.

The default implementation does nothing. See View/Layout#closestComponent, View/View#closestComponent and View/Field#closestComponent methods.

Parameters:
Name Type Description
name string

The name of the component to find.
Inherited From:
Returns:

The component or undefined if not found.

Type
View/Component

constructor(options)

Constructor for sidecar components, currently used to define the order of event delegation on this component's events, after Backbone changed the order in which events are delegated from 0.9.10 to 1.2.0. Also temporarily defines #options on the component, as Backbone no longer does this by default.

Parameters:
Name Type Description
options Object

The Backbone.View initialization options.
Inherited From:
Returns:

The created Backbone.View.

Type
Backbone.View

createComponentFromDef(def, context, module)

Creates a component based on the given metadata, context and module.

Parameters:
Name Type Description
def Object

Metadata defining this component.
context Core/Context

Default context to pass to the new component. (Will be overridden by the context in 'def' param, if defined).
module string

The module to pass to the component. (Will be overridden by the context's module in 'def' param, if defined).
Returns:

The created component.

Type
View/Layout | View/View

delegateEvents()

Proxies the parent method on Backbone.View, but only called after this view instance initializes.

Inherited From:
Returns:

Instance of this component.

Type
View/Component

dispose()

Disposes a component.

Once the component gets disposed it can not be rendered. Do not override this method. Instead override View/Component#_dispose method if you need custom disposal logic.

Inherited From:

getComponent(name)

Gets a component by name.

Parameters:
Name Type Description
name string

Component name.
Returns:

Component with the given name.

Type
View/View | View/Layout

getFieldNames( [module])

Gets a list of all fields used on this layout and its sub layouts/views.

Parameters:
Name Type Argument Default Description
module string <optional>
 this.module

Module name.
Returns:

The list of fields used by this layout.

Type
Array

getFields( [module])

Gets a hash of fields that are currently displayed on this layout.

The hash has field names as keys and field definitions as values.

Parameters:
Name Type Argument Description
module string <optional>

Module name.
Returns:

The currently displayed fields.

Type
Object

getPlaceholder()

Gets the HTML placeholder for this component.

Inherited From:
Returns:

HTML placeholder to be used in a Handlebars template.

Type
Handlebars.SafeString

hide()

Pass through function to jQuery's hide to hide view.

Inherited From:
Returns:

false if the BeforeEvent for hide fails; undefined otherwise.

Type
boolean | undefined

initComponents( [components] [, context] [, module])

Creates subcomponents in the layout and appends them to the layout's #_components. It recursively initializes all components within the specified subcomponents.

Calls View/Layout#_addComponentsFromDef to help add components. Triggers init on this layout once all subcomponent initializes.

Immediate subcomponent will default to the passed in context and module.

Subsequent subcomponents will default to their parents' context and module.

Parameters:
Name Type Argument Default Description
components Array <optional>
 this.meta.components

The definitions of the subcomponents.
context Object <optional>

Context to pass to the new components.
module string <optional>

Module to create the components from.
Returns:

initialized components

Type
Array

initialize(options)

Initializes this component.

Parameters:
Name Type Description
options Object

The Backbone.View initialization options.

Properties
Name Type Argument Description
context Core/Context

Reference to the context.
meta Object <optional>

Component metadata.
module string <optional>

Module name.
model Data/Bean <optional>

Reference to the model this component is bound to.
collection Data/BeanCollection <optional>

Reference to the collection this component is bound to.
Inherited From:

isVisible()

Checks if this component is visible on the page.

Inherited From:
Returns:

true if this component is visible on the page; false otherwise.

Type
boolean

loadData( [options])

Fetches data for layout's model or collection.

The default implementation first calls the Core/Context#loadData method for the layout's context and then iterates through the components and calls their View/Component#loadData method, setting their contexts' fields property beforehand.

Override this method to provide a custom fetch algorithm.

Parameters:
Name Type Argument Description
options Object <optional>

Options that are passed to collection/model's fetch method.
Overrides:

offBefore( [name] [, callback] [, context])

Removes a previously-bound callback function from a before event.

If no context is given, all of the versions of the callback with different contexts will be removed:

this.offBefore('render', this.onRenderBefore);

If no callback is given, all callbacks for the before event will be removed:

this.offBefore('render');

If no event is specified, all callbacks for all before events will be removed from the object:

this.offBefore();
Parameters:
Name Type Argument Description
name string <optional>

Event(s) to remove the listeners for.
callback function <optional>

Callback to remove specifically for a given event.
context Object <optional>

Context to use when determining which callback to remove.
Inherited From:
Mixes In:
Returns:

Instance of this class.

Type
Object

placeComponentsFromTemplate()

Move components created in templates to their appropriate placeholders.

removeComponent(component)

Removes a component from this layout.

Parameters:
Name Type Description
component View/Layout | View/View | number

The layout or view to remove. If given as a number, remove the component at that index.

render()

Renders this component.

IMPORTANT: Do not override this method. Instead, override View/Component#_render to provide render logic.

Inherited From:
Returns:

Instance of this component.

Type
View/Component

setTemplateOption(key, option)

Sets template option.

If the given option already exists it is augmented by the value of the given option parameter.

See the Handlebars.js documentation for details.

Parameters:
Name Type Description
key string

Option key.
option Object

Option value.
Inherited From:

show()

Pass through function to jQuery's show to show view.

Inherited From:
Returns:

false if the BeforeEvent for show fails; undefined otherwise.

Type
boolean | undefined

toString()

Gets a string representation of this layout.

Overrides:
Returns:

String representation of this layout.

Type
string

triggerBefore(name)

Triggers the before callback for the given event name or list of events.

The following example triggers the callback bound to the before save event given:

this.triggerBefore('save');

Multiple events can be triggered as well:

this.triggerBefore('save render dispose');

Custom arguments (e.g. a, b, c) can be passed to the callback:

this.triggerBefore('save', a, b, c);
Parameters:
Name Type Description
name string

The before event(s) to trigger.
Inherited From:
Mixes In:
Returns:

Returns true if the event should be triggered, false otherwise.

Type
boolean

unbind()

Removes all event callbacks registered within this component and undelegates Backbone events.

Override this method to provide custom logic.

Inherited From:

unbindData()

Removes this component's event handlers from model and collection.

Performs the opposite of what View/Component#bindDataChange method does.

Override this method to provide custom logic.

Inherited From:

updateVisibleState(visible)

Updates this component's visibility state.

Note: This does not show/hide the component. Please use View/Component#show and View/Component#hide to do this.

Parameters:
Name Type Description
visible boolean

Visibility state of this component.
Inherited From: