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

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

isReady → boolean

Gets/Sets the component's ready state.

$ → 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

Returns

ComponentContext | Element

controller(controller) → {ComponentContext|ContextControllerHandler}

Gets/Sets the component's controller handler.

Parameters

Returns

ComponentContext | ContextControllerHandler

dispose()

Disposes the component context and all of its allocated resources.

field(fieldName) → {ZxQuery}

Gets, within the component view, elements having the #<field_name> (or z-field="<name>") attribute matching the given value. This method implements a caching mechanism and automatic disposal of allocated objects and events.

Parameters

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

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

Returns

object

Example

<div z-load="default" z-context="model-test">
  <h1 #title></h1>
  <label>Update title</label>
  <input type="text" #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 (#title). For further info, see Data binding in the View's chapter.

Result

modelToView() → {ComponentContext}

Triggers the update of all 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

Returns

ComponentContext ‐ The {ComponentContext} object itself.

options(options) → {ComponentContext|object}

Gets/Sets the component's options.

Parameters

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

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

Returns

ComponentContext | Element

viewToModel() → {ComponentContext}

Creates the data model out of all elements with the #<field_name> (or z-field="<name>") attribute and that are 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

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