ObservableObject class
Constructor
new ObservableObject(context, target, handler)
ObservableObject class.
Parameters
| Name | Type | Description |
|---|---|---|
context | Object | The observer context |
target | Object | The target object to observe |
handler | ProxyHandler | Handler for get/set callbacks |
Methods
subscribe(observableListener)
Subscribe a listener to this observable events
Parameters
| Name | Type | Description |
|---|---|---|
observableListener | ObservableListener |
Returns
‐ ObservableObject
unsubscribe(observableListener)
Unsubscribe a listener
Parameters
| Name | Type | Description |
|---|---|---|
observableListener | ObservableListener |
Returns
‐ ObservableObject
Type Definitions
ActiveRefreshCallback(data, refreshMs, forceActive)
The callback for setting data and delay of next refresh request.
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
data | object | optional | Data to be passed to next refresh call |
refreshMs | number | optional | Delay in milliseconds before the next refresh call |
forceActive | boolean | undefined | optional | Ignore visibility, schedule anyway |
ActiveRefreshHandler($view, $element, data, nextCallback, attributeName)
The Active-Refresh function that will be called for each refresh request.
This
- {HTMLElement}
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
$view | ZxQuery | The component's view | |
$element | ZxQuery | The target element as ZxQuery object | |
data | object | Custom data that ca be passed from call to call | |
nextCallback | ActiveRefreshCallback | Callback for scheduling the next refresh call | |
attributeName | string | optional | Source attribute name if it's a '@' handler |
BindingAdapterCallback($element, fieldName, $view, refreshCallback)
Binding adapter callback.
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
$element | ZxQuery | The view's element bound to the data model's fieldName | |
fieldName | string | The element's bound field name | |
$view | ZxQuery | The view | |
refreshCallback | BindingAdapterRefreshCallback | optional | Refresh loop callback |
BindingAdapterRefreshCallback(refreshMs)
Binding adapter refresh callback
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
refreshMs | number | optional | Milliseconds to wait before refresh (default: 500ms) |
BundleItem
Bundle item object.
Properties
| Name | Type | Description |
|---|---|---|
view | Element | |
css | string | |
controller | ContextControllerHandler |
ComponentCache
Component cache object.
Properties
| Name | Type | Description |
|---|---|---|
componentId | string | The id of the cached component. |
view | Element | The view element. |
css | string | The CSS style text. |
css_applied | boolean | Whether the CSS style has been applied to the view or not. |
controller | ContextControllerHandler | The controller handler function. |
using | string | The 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
| Name | Type | Description |
|---|---|---|
cp | ContextController | The 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
| Name | Type | Description |
|---|---|---|
target | Object | The target object. |
key | string | The name of the property. |
value | Object | The value of the property. |
path | string | The full property path (dotted notation). |
old | Object | The target object before the update. |
Returns
‐ undefined
ContextErrorCallback(error, ctx)
Callback function triggered if an error occurs when loading a component.
This
Parameters
| Name | Type | Description |
|---|---|---|
error | Object | |
ctx | ComponentContext | The 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
| Name | Type | Description |
|---|---|---|
ctx | ComponentContext | The 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
| Name | Type | Description |
|---|---|---|
contextId | Object | undefined | The context id. HTML attribute equivalent: z-context. If not specified it will be randomly generated. HTML attribute equivalent: z-context. |
container | Element | undefined | The container element. |
model | JSON | undefined | The data model. HTML attribute equivalent: z-model. |
view | Element | undefined | The view element. |
controller | ContextControllerHandler | undefined | The controller handler. |
controllerMembers | Object | Additional methods/properties to add to the context controller. |
on | Object.<string, EventCallback> | Object.<string, string> | undefined | The 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. HTML attribute equivalent: z-on. |
behavior | Object.<string, EventCallback> | Object.<string, string> | undefined | The 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. HTML attribute equivalent: z-behavior. |
css | HTMLStyleElement | string | boolean | undefined | Custom stylesheet to apply to the component's view. |
encapsulation | boolean | undefined | Whether to use style encapsulation or not (default: false). |
resetCss | boolean | undefined | Whether to reset view style to prevent inheriting from parent containers (default: false). |
cext | string | undefined | When loading content of the view, appends the specified extension instead of .html. |
html | boolean | string | undefined | It can be set to false, to disable HTML template loading, or it can be set to a string containing the inline HTML template code. |
lazyLoad | boolean | undefined | Enables or disables lazy-loading (default: false). HTML attribute equivalent: z-lazy. |
priority | number | undefined | Loading priority (default: 0). HTML attribute equivalent: z-priority. |
fetchOptions | Object | undefined | Options to be used when fetching this component resources. |
using | string | undefined | Comma separated contexts' id list of components used in this context. A variable with camel-case converted name for each referenced context, will be available in the local scripting scope. |
loaded | ContextLoadedCallback | undefined | The loaded callback, triggered once the component is successfully loaded. |
ready | ContextReadyCallback | undefined | The ready callback, triggered once all component's dependencies have been loaded. |
error | ContextErrorCallback | undefined | The error callback, triggered when an error occurs. |
ContextReadyCallback(ctx)
Callback function triggered when a component has been successfully loaded.
This
Parameters
| Name | Type | Description |
|---|---|---|
ctx | ComponentContext | The component context (same as this). |
ElementPosition
The ElementPosition object returned by the position() method.
Properties
| Name | Type | Description |
|---|---|---|
x | number | X coordinate of the element in the viewport |
y | number | Y coordinate of the element in the viewport |
frame | Position | Position of the element relative to the viewport |
event | string | Current state change event description (enter, exit, scroll, off-scroll) |
visible | boolean | Boolean value indicating whether the element is visible in the viewport |
ElementsIterationCallback(count, item, $item)
Callback function used with the each(..) method.
This
- {ZxQuery}
Parameters
| Name | Type | Description |
|---|---|---|
count | number | Iteration count. |
item | Element | Current element. |
$item | ZxQuery | ZxQuery wrapped element (same as 'this'). |
EventCallback(event, data, $el)
Callback function triggered when an event registered with the on method occurs.
This
- {ZxQuery}
Parameters
| Name | Type | Description |
|---|---|---|
event | string | Event name |
data | Object | Event data |
$el | ZxQuery | ZxQuery wrapped element that sourced the event (same as this) |
IterationCallback(k, item)
The IterationCallback function.
This
- {object}
Parameters
| Name | Type | Description |
|---|---|---|
k | number | object | Iteration count / item key. |
item | object | Current element (same as this). |
LoggerMonitorCallback(ctx, level)
Callback function for monitoring all log messages.
This
- {object}
Parameters
| Name | Type | Description |
|---|---|---|
ctx | Object | |
level | string | |
...args | Array.<Object> |
PlayFxCallback($element, classQueue)
Callback function used with the each(..) method.
This
- {ZxQuery}
Parameters
| Name | Type | Description |
|---|---|---|
$element | ZxQuery | Target element (same as 'this'). |
classQueue | Array.<string> | Transition/animation class queue left to play, null if the animation ended. |
PlayFxConfig
Configuration object for playFx, playTransition, playAnimation utility methods.
Properties
| Name | Type | Argument | Description |
|---|---|---|---|
type | 'transition' | 'animation' | The type of effect to play. | |
target | Element | ZxQuery | Target element. | |
classes | Array.<string> | string | List of transition or animation classes to play. | |
options | object | optional | Transition/animation options ('delay', 'duration', etc..). |
holdState | boolean | optional | Hold last transition/animation class. |
onStep | PlayFxCallback | optional | Since class list can contain more than just two classes, this callback will be called after each pair of transition/animation ended. |
onEnd | PlayFxCallback | optional | Called when all transitions/animations ended. |
Position
Relative position.
Properties
| Name | Type | Description |
|---|---|---|
dx | number | |
dy | number |
ResourceUsingCallback(resourcePath, hashIdOrContext)
Callback in response to a zuix.using request.
Parameters
| Name | Type | Description |
|---|---|---|
resourcePath | string | |
hashIdOrContext | string | object |
ZxQueryHttpBeforeSendCallback(xhr)
The ZxQueryHttpBeforeSendCallback function.
This
- {undefined}
Parameters
| Name | Type | Description |
|---|---|---|
xhr | XMLHttpRequest |
ZxQueryHttpErrorCallback(xhr, statusText, statusCode)
The ZxQueryHttpErrorCallback function.
This
- {undefined}
Parameters
| Name | Type | Description |
|---|---|---|
xhr | XMLHttpRequest | |
statusText | string | |
statusCode | number |
ZxQueryHttpOptions
zuix.$.http options object.
Properties
| Name | Type | Description |
|---|---|---|
url | string | |
beforeSend | ZxQueryHttpBeforeSendCallback | undefined | |
success | ZxQueryHttpSuccessCallback | undefined | |
error | ZxQueryHttpErrorCallback | undefined | |
then | ZxQueryHttpThenCallback | undefined |
ZxQueryHttpSuccessCallback(responseText)
The ZxQueryHttpSuccessCallback function.
This
- {undefined}
Parameters
| Name | Type | Description |
|---|---|---|
responseText | string |
ZxQueryHttpThenCallback(xhr)
The ZxQueryHttpThenCallback function.
This
- {undefined}
Parameters
| Name | Type | Description |
|---|---|---|
xhr | XMLHttpRequest |
