zuix.js emoji_nature API

ContextController class

Constructor

new ContextController(context) → {ContextController}

ContextController constructor.

Parameters

Returns

ContextController

Properties

log → Logger

The component's built-in logger.

init → ContextControllerInitCallback

If set, this function gets called before component is created and before applying context options.

create → ContextControllerCreateCallback

If set, this function gets called after loading, when the component is created and its view (if provided) is loaded.

update → ContextControllerUpdateCallback

If set, this function gets called each time the data model is updated.

dispose → ContextControllerDisposeCallback

If set, this function gets called when the component is about to be disposed.

Methods

addBehavior(eventPath, handler) → {ContextController}

Adds a behavior handler.

Parameters

Returns

ContextController

addEvent(eventPath, handler) → {ContextController}

Adds an event handler.

Parameters

Returns

ContextController

addTransition(className, properties, options)

Adds a CSS transition effect to the component stylesheet.

Parameters

clearCache()

Clears the fields cache.

declare(name, handler) → {ContextController}

Declare fields that are available in the view's scripting scope.

Parameters

Returns

ContextController ‐ The {ContextController} itself.

expose(name, handler) → {ContextController}

Declare fields that are available as public members of the component context object.

Parameters

Returns

ContextController ‐ The {ContextController} itself.

field(fieldName) → {ZxQuery}

Gets view's field(s) with the specified name. Same as ComponentContext–field.

Parameters

Returns

ZxQuery ‐ A {ZxQuery} object wrapping the matching element(s).

for(componentId) → {ContextController}

Registers this one as the default controller for the given component type.

Parameters

Returns

ContextController ‐ The {ContextController} itself.

Example

// Controller of component 'path/to/component_name'
var ctrl = zuix.controller(function(cp) {
    // `cp` is the {ContextController}
    cp.create = function() { ... };
    cp.dispose = function() { ... }
}).for('path/to/component_name');

loadCss(options) → {ContextController}

Loads the .css file and replace the current view style of the component. If no options.path is specified, it will try to load the file with the same base-name as the componentId.

Parameters

Returns

ContextController ‐ The {ContextController} object itself.

Example

// loads 'path/to/component_name.css' by default
cp.loadCss();
// or loads the view css with provided options
cp.loadCss({
    path: 'url/of/style/file.css',
    success: function() { ... },
    error: function(err) { ... },
    then: function() { ... }
});

loadHtml(options) → {ContextController}

Loads the .html file and replace the view markup of the component. If no options.path is specified, it will try to load the file with the same base-name as the componentId.

Parameters

Returns

ContextController ‐ The {ContextController} object itself.

Example

// loads 'path/to/component_name.html' by default
cp.loadHtml();
// or loads the view html with provided options
cp.loadHtml({
    path: 'url/of/view/file.html',
    success: function() { ... },
    error: function(err) { ... },
    then: function() { ... }
});

model(model) → {ContextController|object}

Gets/Sets the data model of the component. Same as ComponentContext–model.

Parameters

Returns

ContextController | object

options() → {ContextOptions|any}

Gets the component options. Same as ComponentContext–options.

Returns

ContextOptions | any ‐ The component options.

trigger(eventPath, eventData, isHook) → {ContextController}

Triggers the component event eventPath with the given eventData object. To listen to a component event use the {ComponentContext}.on(eventPath, handler) method or in case isHook is set to true, use the zuix.hook(eventPath, handler) method (global hook event).

Parameters

Returns

ContextController

Example

// somewhere inside the slide-show component controller
cp.trigger('slide:change', slideIndex);

// somewhere in a page hosting the slide-show component
// set component event listeners
zuix.context('my-slide-show')
  .on('slide:change', function(slideIndex) { ... })
  .on(...);

using(resourceType, resourcePath, callback) → {ContextController}

Loads a CSS, script or a singleton component. Resources loaded with this method are available in the global scope and can also be included in the application bundle. If the component is a custom element, styles will be loaded as a component-local stylesheets and placed inside its ShadowDOM.

Parameters

Returns

ContextController ‐ The {ContextController} object itself.

Example

 this.using('script', 'https://some.cdn.js/moment.min.js', function(){
  // can start using moment.js
});

view(filter) → {ZxQuery}

Gets the component view or if filter argument is passed, gets the view elements matching the given filter (shorthand for cp.view().find(filter)).

Parameters

Returns

ZxQuery

Example

// get all `checkbox` elements with `.checked` class.
var choices = cp.view('input[type="checkbox"].checked');
choices.removeClass('.checked');
// ...
// hide the component's view
cp.view().hide();

Type Definitions

ActiveRefreshCallback(data, refreshMs, forceActive)

The callback for setting data and delay of next refresh request.

Parameters

ActiveRefreshHandler($view, $element, data, nextCallback, attributeName)

The Active-Refresh function that will be called for each refresh request.

This

• {HTMLElement}

Parameters

BindingAdapterCallback($element, fieldName, $view, refreshCallback)

Binding adapter callback.

Parameters

BindingAdapterRefreshCallback(refreshMs)

Binding adapter refresh callback

Parameters

BundleItem

Bundle item object.

Properties

ComponentCache

Component cache object.

Properties

ContextControllerCreateCallback()

Function that gets called after loading, when the component is actually created and ready.

ContextControllerDisposeCallback()

Function called when the component is about to be disposed.

ContextControllerHandler(cp)

This function is called after the component is loaded and it is used to initialize its controller.

This

• {ContextController}

Parameters

ContextControllerInitCallback()

Function that gets called after loading and before the component is created.

ContextControllerUpdateCallback(target, key, value, path, old)

Function called when the data model of the component is updated

Parameters

Returns

‐ undefined

ContextErrorCallback(error, ctx)

Callback function triggered if an error occurs when loading a component.

This

• {ComponentContext}

Parameters

ContextLoadedCallback(ctx)

Callback function triggered when a component is created, after all of its dependencies have been loaded.

This

• {ComponentContext}

Parameters

ContextOptions

This object can be supplied when loading a component. It can be either passed as argument for the zuix.load(...) / zuix.loadComponent(...) methods, in the javascript code, or with the z-options attribute in the HTML code of the component's host element.

Properties

ContextReadyCallback(ctx)

Callback function triggered when a component has been successfully loaded.

This

• {ComponentContext}

Parameters

ElementPosition

The ElementPosition object returned by the position() method.

Properties

ElementsIterationCallback(count, item, $item)

Callback function used with the each(..) method.

This

• {ZxQuery}

Parameters

EventCallback(event, data, $el)

Callback function triggered when an event registered with the on method occurs.

This

• {ZxQuery}

Parameters

IterationCallback(k, item)

The IterationCallback function.

This

• {object}

Parameters

LoggerMonitorCallback(ctx, level)

Callback function for monitoring all log messages.

This

• {object}

Parameters

PlayFxCallback($element, classQueue)

Callback function used with the each(..) method.

This

• {ZxQuery}

Parameters

PlayFxConfig

Configuration object for playFx, playTransition, playAnimation utility methods.

Properties

Position

Relative position.

Properties

ResourceUsingCallback(resourcePath, hashIdOrContext)

Callback in response to a zuix.using request.

Parameters

ZxQueryHttpBeforeSendCallback(xhr)

The ZxQueryHttpBeforeSendCallback function.

This

• {undefined}

Parameters

ZxQueryHttpErrorCallback(xhr, statusText, statusCode)

The ZxQueryHttpErrorCallback function.

This

• {undefined}

Parameters

ZxQueryHttpOptions

zuix.$.http options object.

Properties

ZxQueryHttpSuccessCallback(responseText)

The ZxQueryHttpSuccessCallback function.

This

• {undefined}

Parameters

ZxQueryHttpThenCallback(xhr)

The ZxQueryHttpThenCallback function.

This

• {undefined}

Parameters