zuix.js emoji_nature API

ComponentContext class

Constructor

new ComponentContext(zuixInstance, options, eventCallback) → {ComponentContext}

The component context object represents the component instance itself, and it holds all of its data such as the view template, the style, the controller, the data model.

Parameters
NameTypeArgumentDescription
zuixInstanceZuix
optionsContextOptionsOptions to create this component context
eventCallbackfunctionoptionalEvent routing callback
Returns

ComponentContext ‐ The component context instance.

Properties

componentId → string

The component identifier "[<path>/]<name>".

path → string

Gets the base path of this component.

name → string

Gets the name of this component (last part of the path).

$ → ZxQuery

Access the view of this component. Use this to register event handlers for elements in this view to take advantage of automatic event unsubscription and view fields caching.

handlers → Object.<string, ActiveRefreshHandler>

List component-local @ handlers.

Methods

container(container) → {ComponentContext|Element}

Gets/Sets the container element of the component. Returns the current container element if no argument is passed, the ComponentContext itself otherwise.

Parameters
NameTypeArgumentDescription
containerElementoptionalThe container element.
Returns

ComponentContext | Element

controller(controller) → {ComponentContext|ContextControllerHandler}

Gets/Sets the component's controller handler.

Parameters
NameTypeArgumentDescription
controllerContextControllerHandler | undefinedoptionalThe controller's handler function
Returns

ComponentContext | ContextControllerHandler

dispose()

Disposes the component context and all of its allocated resources.

field(fieldName) → {ZxQuery}

Gets, within the component's view, elements with # (same as z-field) attribute matching the given fieldName. This method implements a caching mechanism and automatic disposal of allocated objects and events.

Parameters
NameTypeDescription
fieldNamestringValue to match in the z-field attribute
Returns

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

Example
<div z-load="default" z-context="field-test">
<h1 #title>Loading context...</h1>
</div>

<script>
zuix.context('field-test', (ctx) => {
ctx.field('title')
.html('Context ready.');
});
</script>
Result
Loading context...

getCssId() → {string}

Gets the CSS identifier of this component's style.

Returns

string ‐ The css-id attribute of this component.

model(model) → {object}

Gets/Sets the data model of the component. When getting model(), the returned object is an observable wrapped instance of the originally provided model, that will automatically trigger the update of any bound field when a property in the model's changes.

Parameters
NameTypeArgumentDescription
modelobject | undefinedoptionalThe model object
Returns

object

Example
<div z-load="default" z-context="model-test">
<h1 z-field="title"></h1>
<label>Update title</label>
<input type="text" z-field="title-input" />
</div>

<script>
zuix.context('model-test', (ctx) => {
const model = ctx.model({
title: 'Test title'
});
ctx.field('title-input')
.value(model.title)
.on('input', (e, input) =>
{ model.title = input.value(); });
});
</script>

In this example, when the text in the input box is changed, the new value is assigned to model.title property, and this will automatically trigger the update of the h1 element's content in the view, because it is bound to the title's field (z-field="title"). For further info, see Data binding in the View's chapter.

Result

modelToView() → {ComponentContext}

Triggers the update of all z-field elements in the view that are bound to the model's fields. If the inherits="true" attribute is present on a field, data can be inherited from parent component.

Returns

ComponentContext ‐ The {ComponentContext} object itself.

on(eventPath, eventHandler) → {ComponentContext}

Listens for a component event.

Parameters
NameTypeArgumentDescription
eventPathstring | Array.<Object> | JSONThe event path or object with event name/handler pairs.
eventHandlerEventCallbackoptionalThe event handler function. Not used if eventPath is an object with event name/handler pairs.
Returns

ComponentContext ‐ The {ComponentContext} object itself.

options(options) → {ComponentContext|object}

Gets/Sets the component's options.

Parameters
NameTypeArgumentDescription
optionsContextOptions | undefinedoptionalThe JSON options object.
Returns

ComponentContext | object

style(css) → {ComponentContext|Element}

Gets/Sets the style of the component's view. The css argument can be a string containing all styles definitions or a reference to a style element. If no argument is given, then the current style element is returned.

Parameters
NameTypeArgumentDescription
cssstring | Element | undefinedoptionalThe CSS string or style element
Returns

ComponentContext | Element

Example
ctx.style("p { font-size: 120%; } .hidden { display: 'none'; }");

view(view) → {ComponentContext|Element}

Gets/Sets the view element of the component. If an HTML string is passed, then the view element will be a new div wrapping the given markup. Returns the current view element if no argument is passed, the ComponentContext itself otherwise.

Parameters
NameTypeArgumentDescription
viewElement | string | undefinedoptionalThe HTML string or element of the view.
Returns

ComponentContext | Element

viewToModel() → {ComponentContext}

Creates the data model out of all z-field elements declared in the component's view.

Returns

ComponentContext ‐ The {ComponentContext} object itself.

Type Definitions

ActiveRefreshCallback(data, refreshMs, forceActive)

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

Parameters
NameTypeArgumentDescription
dataobjectoptionalData to be passed to next refresh call
refreshMsnumberoptionalDelay in milliseconds before the next refresh call
forceActiveboolean | undefinedoptionalIgnore visibility, schedule anyway

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

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

This
Parameters
NameTypeArgumentDescription
$viewZxQueryThe component's view
$elementZxQueryThe target element as ZxQuery object
dataobjectCustom data that ca be passed from call to call
nextCallbackActiveRefreshCallbackCallback for scheduling the next refresh call
attributeNamestringoptionalSource attribute name if it's a '@' handler

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

Binding adapter callback.

Parameters
NameTypeArgumentDescription
$elementZxQueryThe view's element bound to the data model's fieldName
fieldNamestringThe element's bound field name
$viewZxQueryThe view
refreshCallbackBindingAdapterRefreshCallbackoptionalRefresh loop callback

BindingAdapterRefreshCallback(refreshMs)

Binding adapter refresh callback

Parameters
NameTypeArgumentDescription
refreshMsnumberoptionalMilliseconds to wait before refresh (default: 500ms)

BundleItem

Bundle item object.

Properties
NameTypeDescription
viewElement
cssstring
controllerContextControllerHandler

ComponentCache

Component cache object.

Properties
NameTypeDescription
componentIdstringThe id of the cached component.
viewElementThe view element.
cssstringThe CSS style text.
css_appliedbooleanWhether the CSS style has been applied to the view or not.
controllerContextControllerHandlerThe controller handler function.
usingstringThe url/path if this is a resource loaded with zuix.using(..) method.

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
Parameters
NameTypeDescription
cpContextControllerThe component controller object

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
NameTypeDescription
targetObjectThe target object.
keystringThe name of the property.
valueObjectThe value of the property.
pathstringThe full property path (dotted notation).
oldObjectThe target object before the update.
Returns

‐ undefined

ContextErrorCallback(error, ctx)

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

This
Parameters
NameTypeDescription
errorObject
ctxComponentContextThe component context object (same as this).

ContextLoadedCallback(ctx)

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

This
Parameters
NameTypeDescription
ctxComponentContextThe component context (same as this).

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
NameTypeDescription
contextIdObject | undefinedThe context id. HTML attribute equivalent: z-context. If not specified it will be randomly generated.
containerElement | undefinedThe container element.
modelJSON | undefinedThe data model. HTML attribute equivalent: z-model.
viewElement | undefinedThe view element. HTML attribute equivalent: z-view.
controllerContextControllerHandler | undefinedThe controller handler.
onObject.<string, EventCallback> | Object.<string, string> | undefinedThe map of event handlers for standard and component's events. An event can also be simply routed to another component's event by specifying the mapped event name string.
behaviorObject.<string, EventCallback> | Object.<string, string> | undefinedThe map of event handlers for behaviors. An event can also be simply routed to another component's event by specifying the mapped event name string.
cssHTMLStyleElement | string | boolean | undefinedCustom stylesheet to apply to the component's view.
encapsulationboolean | undefinedWhether to use style encapsulation or not (default: false).
resetCssboolean | undefinedWhether to reset view style to prevent inheriting from parent containers (default: false).
cextstring | undefinedWhen loading content of the view, appends the specified extension instead of .html.
htmlboolean | undefinedEnables or disables HTML template loading (default: true).
lazyLoadboolean | undefinedEnables or disables lazy-loading (default: false).
prioritynumber | undefinedLoading priority (default: 0).
readyContextLoadedCallback | undefinedThe loaded callback, triggered once the component is successfully loaded.
readyContextReadyCallback | undefinedThe ready callback, triggered once all component's dependencies have been loaded.
errorContextErrorCallback | undefinedThe error callback, triggered when an error occurs.

ContextReadyCallback(ctx)

Callback function triggered when a component has been successfully loaded.

This
Parameters
NameTypeDescription
ctxComponentContextThe component context (same as this).

ElementPosition

The ElementPosition object returned by the position() method.

Properties
NameTypeDescription
xnumberX coordinate of the element in the viewport
ynumberY coordinate of the element in the viewport
framePositionPosition of the element relative to the viewport
eventstringCurrent state change event description (enter, exit, scroll, off-scroll)
visiblebooleanBoolean value indicating whether the element is visible in the viewport

ElementsIterationCallback(count, item, $item)

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

This
Parameters
NameTypeDescription
countnumberIteration count.
itemElementCurrent element.
$itemZxQueryZxQuery wrapped element (same as 'this').

EventCallback(event, data, $el)

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

This
Parameters
NameTypeDescription
eventstringEvent name
dataObjectEvent data
$elZxQueryZxQuery wrapped element that sourced the event (same as this)

IterationCallback(k, item)

The IterationCallback function.

This
Parameters
NameTypeDescription
knumber | objectIteration count / item key.
itemobjectCurrent element (same as this).

LoggerMonitorCallback(ctx, level)

Callback function for monitoring all log messages.

This
Parameters
NameTypeDescription
ctxObject
levelstring
...argsArray.<Object>

PlayFxCallback($element, classQueue)

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

This
Parameters
NameTypeDescription
$elementZxQueryTarget element (same as 'this').
classQueueArray.<string>Transition/animation class queue left to play, null if the animation ended.

PlayFxConfig

Configuration object for playFx, playTransition, playAnimation utility methods.

Properties
NameTypeDescription
type'transition' | 'animation'The type of effect to play.
targetElement | ZxQueryTarget element.
classesArray.<string> | stringList of transition or animation classes to play.
optionsobjectTransition/animation options ('delay', 'duration', etc..).
holdStatebooleanHold last transition/animation class.
onStepPlayFxCallbackSince class list can contain more than just two classes, this callback will be called after each pair of transition/animation ended.
onEndPlayFxCallbackCalled when all transitions/animations ended.

Position

Relative position.

Properties
NameTypeDescription
dxnumber
dynumber

ResourceUsingCallback(resourcePath, hashIdOrContext)

Callback in response to a zuix.using request.

Parameters
NameTypeDescription
resourcePathstring
hashIdOrContextstring | object

ZxQueryHttpBeforeSendCallback(xhr)

The ZxQueryHttpBeforeSendCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest

ZxQueryHttpErrorCallback(xhr, statusText, statusCode)

The ZxQueryHttpErrorCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest
statusTextstring
statusCodenumber

ZxQueryHttpOptions

zuix.$.http options object.

Properties
NameTypeDescription
urlstring
beforeSendZxQueryHttpBeforeSendCallback | undefined
successZxQueryHttpSuccessCallback | undefined
errorZxQueryHttpErrorCallback | undefined
thenZxQueryHttpThenCallback | undefined

ZxQueryHttpSuccessCallback(responseText)

The ZxQueryHttpSuccessCallback function.

This
Parameters
NameTypeDescription
responseTextstring

ZxQueryHttpThenCallback(xhr)

The ZxQueryHttpThenCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest
GitHub logo
JavaScript library for component-based websites and applications.