ContextController
class
Constructor
new ContextController(context) → {ContextController}
ContextController constructor.
Parameters
Name | Type | Description |
---|---|---|
context | ComponentContext |
Returns
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
Name | Type | Description |
---|---|---|
eventPath | string | Event path. |
handler | EventCallback | Behavior handler. |
Returns
addEvent(eventPath, handler) → {ContextController}
Adds an event handler.
Parameters
Name | Type | Description |
---|---|---|
eventPath | string | Event path. |
handler | EventCallback | Event hanler. |
Returns
addTransition(className, properties, options)
Adds a CSS transition effect to the component stylesheet.
Parameters
Name | Type | Description |
---|---|---|
className | string | CSS class name to assign to this transition. |
properties | Array.<Object> | JSON | List of CSS properties/values to set. |
options | Array.<Object> | JSON | List of transition options. |
clearCache()
Clears the fields cache.
expose(name, handler) → {ContextController}
Exposes a method or property declared in the private scope of the controller, as a public member of the component context object.
Parameters
Name | Type | Argument | Description |
---|---|---|---|
name | string | JSON | Name of the exposed method/property, or list of name/value pairs | |
handler | function | optional | Function or property descriptor. |
Returns
ContextController ‐ The {ContextController}
itself.
field(fieldName) → {ZxQuery}
Gets view's field(s) with the specified name. Same as ComponentContext–field.
Parameters
Name | Type | Description |
---|---|---|
fieldName | string | Value to match in the z-field attribute |
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
Name | Type | Description |
---|---|---|
componentId | string | Component identifier |
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
Name | Type | Argument | Description |
---|---|---|---|
options | object | optional | The options object |
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
Name | Type | Argument | Description |
---|---|---|---|
options | object | optional | The options object |
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
Name | Type | Argument | Description |
---|---|---|---|
model | object | undefined | optional | The model object |
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
Name | Type | Argument | Description |
---|---|---|---|
eventPath | string | The event path | |
eventData | object | The event data | |
isHook | boolean | optional | Trigger as global hook event |
Returns
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(...);
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
Name | Type | Argument | Description |
---|---|---|---|
filter | string | undefined | optional |
Returns
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
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. |
container | Element | undefined | The container element. |
model | JSON | undefined | The data model. HTML attribute equivalent: z-model. |
view | Element | undefined | The view element. HTML attribute equivalent: z-view. |
controller | ContextControllerHandler | undefined | The controller handler. |
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. |
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. |
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 | undefined | Enables or disables HTML template loading (default: true). |
lazyLoad | boolean | undefined | Enables or disables lazy-loading (default: false). |
priority | number | undefined | Loading priority (default: 0). |
ready | 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 | 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 | Transition/animation options ('delay', 'duration', etc..). |
holdState | boolean | Hold last transition/animation class. |
onStep | PlayFxCallback | Since class list can contain more than just two classes, this callback will be called after each pair of transition/animation ended. |
onEnd | PlayFxCallback | 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 |