Bindary ($bindary) is a highly flexible data-binding framework for developing web applications. It utilizes declarative HTML templates based on data-attributes to bind the DOM- to the -JavaScript world.
Classes
- TemplateBase
- TemplateItem
Members
A value indicating if a fragment identifier (anchor tag) specified in the URL through a hashtag is automatically scrolled into view after loading the route.
Use a second hashtag in the URL (without a matching route) to jump to a bookmark when the first hashtag contains the route-path.
Type:
(static) appData :Object
Holds the data object which is bound to the global application context.
Type:
(static) attributePrefix :String
Type:
(static) autoUpdateView :Boolean
A value indicating if the view is automatically updated when changes are being observed.
Type:
(static) baseTitle :String
The base title of the application.
Type:
A value indicating whether internal script and css tags loaded with a specific view are being cached.
Type:
(static) cacheRouteData :Boolean
A value indicating whether the routeData container is retained in cache when a route is unloaded.
Route data is keyed by route index, so it is shared by every URL matching the same route definition.
Type:
(static) cacheViewData :Boolean
A value indicating whether the viewData container is retained in cache when a route is unloaded.
View data is keyed by route path, so each distinct URL holds its own.
Type:
(static) caching :Boolean
A value indicating whether client-side caching of views, view-css, view-scripts, controllers and data is enabled.
Type:
(static) clearViewOnUnload :Boolean
A value indicating if the view HTML is cleared when a route is unloaded.
Type:
(static) clientId :String|null
A value which is sent with each data request to be able to uniquely identify clients on the server. Only required when the client-id is not stored in a server-side Session.
Type:
(static) connected :Boolean
A value indicating if the framework is connected with a data provider.
Type:
(static) controller :Object
Holds the controller object for the active route.
Type:
(static) controllerRootURL :String
The relative or absolute root URL where client controllers are located.
Type:
(static) dataBindTrigger :HTMLElement|null
The element that triggered a data-bind.
Used to prevent updating the field value while typing. Cleared after a view update or can be manually cleared to force the element’s value to update on the next view refresh.
Type:
(static) dataRequest :dataRequestType|null
Holds the current data request object.
Type:
(static) dataServerURL :String|null
The connection URL of the server side data-server for retrieving app/view data. Leave this setting empty when custom data retrieval methods are desired.
Type:
The date format used to convert date(time) types for textual display. Defaults to MM/dd/yyyy hh:mm.
Type:
(static) decimalPrecision :String|null
The decimal precision used to convert numeric types for textual display.
Type:
(static) decimalSeparator :String
The decimal separator used to convert numeric types for textual display. Defaults to '.'.
Type:
(static) defaultRecreateRule :Boolean
A value indicating if the HTML element must be recreated when there is already an element for the relevant index/key.
Type:
(static) defaultUpdateRule :Boolean
A value indicating if server data overwrites (false) or updates (true) data on the client.
Type:
(static) detectOutsideView :Boolean
A value indicating if Bindary data-bound elements (template-items) are being detected outside of the view container element.
Set to false if template elements are only defined inside of the view container for better performance.
Type:
(static) dirtyChecks :Boolean
A value indicating if the data change detection must be precise (false) or as fast as possible (true).
When changed, it will have direct effect on the next view update. With dirty checks enabled: detection of changes during the view update works by checking if the data-key for a registered change is equal or inside an item's context.
Items that don't match with a registered data change are skipped and possible child items are not processed. Therefore possible context switching (by root/parent navigators) inside a template item is not considered. Nor are the preRender event actions, which may decide if a template item is rendered.
Type:
(static) equalityCheck :Boolean
A value indicating whether incoming data responses are compared for equality before updating to avoid redundant changes.
Type:
(static) hyphenatedAttributes :boolean
A value indicating if attribute names use the hyphenated form (e.g. view-formatter) instead of the fused form (e.g. viewFormatter). This setting exists for backwards compatibility.
Type:
(static) idPrefix :String
The id prefix for bindary elements within the view.
Type:
(static) includeRootURL :String
The relative or absolute root URL where includables are located.
Type:
(static) keepAttributes :Boolean
A value indicating if data-bindary attributes on the element are retained.
When disabled, calling updateTemplateItem() will update the defined attributes and hold previously stored values; clearing can be accomplished by specifying 'null' as attribute value.
When enabled, calling updateTemplateItem() will clear undefined attributes.
Type:
(static) launchOnLoad :Boolean
A value indicating if the route for the initial route path value is loaded when the DOM is ready.
Type:
(static) linkDispatching :Boolean
A value indicating if relative hyperlinks are dispatched to (handled by) the Bindary routing.
Type:
(static) liveBind :Boolean
A value indicating if a data-bound input element performs a live update of the corresponding data model (keyup events) or after a change (change/blur events).
Type:
(static) liveBindDelay :Number
The delay in milliseconds for a live update.
Type:
(static) observeDuringRender :Boolean
A value indicating if changes are being observed during the view rendering process.
Type:
(static) observing :Boolean
A value indicating if changes are being observed for the default appData, routeData and viewData data-containers (ECMAScript 6 required).
Type:
Fires when the document is scrolled to an anchor.
Type:
- See:
-
Fires when the returned data object contains an error (isError: true).
Type:
- See:
-
Fires when the view data is requested.
Type:
- See:
-
Fires after route data and sources are loaded.
Type:
- See:
-
Fires after data binding is applied to an input element.
Type:
- See:
-
Fires after the client data has been updated.
Type:
- See:
-
Fires after the route has fully loaded.
Type:
- See:
-
Fires after the view is rendered.
Type:
Fires before a data-bound input element is updated. Can be used for validation.
Type:
- See:
-
Fires when new data is received, before the client data is updated.
Type:
- See:
-
Fires before loading route data and sources.
Type:
- See:
-
Fires before the view is rendered.
Type:
Fires when a route cannot be loaded: no route matches the route path, or the route's view or controller fails to load.
Type:
- See:
-
Fires after the route is unloaded because a new route is requested.
Type:
- See:
-
Fires when the document tab becomes visible or hidden.
Type:
- See:
-
Fires when the WebSocket connection is closed (server can close connection also).
Type:
- See:
-
Fires when the WebSocket connection is opened.
Type:
- See:
-
(static) prettyURL :Boolean
A value indicating if the route path in the URL starts with a forward slash (pretty) instead of a hash(#) or hash-bang(#!).
e.g. /Category/Product instead of #Category/Product.
When enabled, server-side routing of the route-path to the application's entrance page is required to deal with initial page loads where a route path is part of the URL (direct link).
Bindary will detect the route path in the URL and launch with the relevant route.
Type:
(static) relativeDataServerURL :Boolean
A value indicating if a relative data-server URL is used.
Type:
(static) reloadPageOnWebSocketServerError :Boolean
A value indicating that the page is reloaded when the WebSocket is closed by the server due to an internal server error.
Type:
A value indicating that the route is reloaded when the page is restored from the back/forward cache (bfcache) after navigating back to the page.
Type:
(static) rootPath :String
The root path of the application must be specified when "prettyURL" is enabled and the application URL contains a path after the URL origin (protocol//domain:port), so that Bindary can detect the route path within the URL.
The rootPath must start and end with a forward slash (/).
Type:
Holds the current active route.
Type:
(static) routeData :Object
Holds the data object which is bound to the context of the active route.
Type:
(static) routeIndex :String|null
Holds the current active route index.
Type:
(static) routePath :String
Holds the current active route path and can be set as initial launch value.
Type:
(static) routes :Array.<Object>
The list of mapped routes.
Type:
(static) sanitizer :function|null
Gets or sets a custom sanitizer function. Overrides built-in sanitizer.
Type:
The time in milliseconds before a new attempt is made, when a previous attempt failed, to scroll to the anchor or history scroll position.
Type:
The time in milliseconds before attempting to set the correct scroll position stops.
Type:
(static) secure :Boolean|null
A value indicating to use a secure connection (SSL/TLS). Defaults to true if a HTTPS connection is detected.
Type:
(static) trustHTML :Boolean
A value indicating if all data provided through data-bindary-html attributes are trusted.
Enable this option only if there are no (sanitized) user defined HTML data-sources (potential security risks).
To trust a specific attribute use data-bindary-html="trust:dataKey".
Type:
(static) useShorthand :boolean
A value indicating whether to use shorthand ('m-') or default ('data-bindary-') prefixes for attributes.
Type:
(static) useWebSocket :Boolean
A value indicating if websockets should be used for updating view data.
Type:
(static) viewData :Object
Holds the data object which is bound to the context of the active view.
Type:
(static) viewRootURL :String
The relative or absolute root URL where views are located.
Type:
(static) websocketSupport :Boolean
A value indicating if the browser has support for the websocket protocol.
Type:
(static) xhrUpdateInterval :Number|null
The interval time in milliseconds between xhr data update checks when websockets are not supported/enabled.
Type:
Methods
(static) addComponent(name, initiator)
Parameters:
| Name |
Type |
Description |
name |
String
|
The name of the component. |
initiator |
function
|
A method which initializes and returns a new instance of the component. |
(static) addRoute(route) → {number}
Adds a route with the specified route settings.
Parameters:
Returns:
The array index of the added route within the $bindary.routes array.
-
Type
-
number
(static) clearCache(keepControllersopt, keepExternalScriptsopt, keepExternalCssopt, keepInternalScriptsopt, keepInternalCssopt)
Clears the internal cache object in where views, includes, controllers and data are stored. Loaded script and CSS tags from a view or includable file will also be removed from the page when clearing the cache (unless indicated otherwise through the parameters).
Parameters:
| Name |
Type |
Attributes |
Description |
keepControllers |
Boolean
|
<optional>
|
A value indicating if loaded controller script tags must remain on the page. |
keepExternalScripts |
Boolean
|
<optional>
|
A value indicating if external script tags from a view or includable file must remain on the page. |
keepExternalCss |
Boolean
|
<optional>
|
A value indicating if external css tags from a view or includable file must remain on the page. |
keepInternalScripts |
Boolean
|
<optional>
|
A value indicating if internal (also called inline) script tags from a view or includable file must remain on the page. |
keepInternalCss |
Boolean
|
<optional>
|
A value indicating if internal (also called inline) css tags from a view or includable file must remain on the page. |
(static) clearDataChanges()
Clears all registered data changes and cancels the delayed view update.
(static) createViewTree(rootElopt, rootItemopt)
Creates the view tree with data-bound template items.
Parameters:
| Name |
Type |
Attributes |
Description |
rootEl |
HTMLElement
|
<optional>
|
The root HTML Element. |
rootItem |
componyx.bindary.TemplateItem
|
<optional>
|
The root Template Item. |
(static) dataBind(elements)
Updates data-model values for data-bound elements.
Parameters:
| Name |
Type |
Description |
elements |
Array.<HTMLElement>
|
A collection of data-bound elements for which the data-model values must be updated. |
(static) dataChange(dataKey, dataContaineropt, arrayUpdateRules, updateopt)
Registers a data change for the specified dataKey so that the next view update will display the new data.
Parameters:
| Name |
Type |
Attributes |
Description |
dataKey |
String
|
|
The hierarchical path of the changed object or object value. This string value should consist of object keys separated by a '.' (dot) character (default, change via dataKeySeparatorChar) and without the data container name. |
dataContainer |
String
|
Number
|
<optional>
|
One of the root data-containers to which the data-key belongs: appData(0), routeData(1) or viewData(2). |
arrayUpdateRules |
Array.<Object>
|
|
An array of updateRule objects for the array corresponding with the data-bound repeat element.
Properties
| Name |
Type |
Description |
keys |
Array.<Number>
|
Indexes or keys within the collection where items where updated. |
recreate |
Boolean
|
A value indicating if the HTML element must be recreated when there is already an element for the relevant index/key. |
addIndex |
Number
|
Position within the array where the items where added. Do not specify the index (Null/Undefined) when items where added at the end of the array. |
addCount |
Number
|
Number of items that where added to the array. |
removeIndex |
Number
|
Position within the array where the items where removed. Do not specify the index (Null/Undefined) when items where removed at the end of the array. |
removeCount |
Number
|
Number of items that where removed from the array. |
|
update |
Boolean
|
<optional>
|
The view is updated automatically after a data change. This default update behaviour can be cancelled by specifying false for this argument. |
(static) dataChangeForId(updateId, arrayUpdateRules, updateopt)
Registers a data change for the element with the specified updateId so that the next view update will display the new data.
Parameters:
| Name |
Type |
Attributes |
Description |
updateId |
String
|
|
The update id of the corresponding data-bound element. |
arrayUpdateRules |
Array.<Object>
|
|
An array of updateRule objects for the array corresponding with the data-bound repeat element.
Properties
| Name |
Type |
Description |
keys |
Array.<Number>
|
Indexes or keys within the collection where items where updated. |
recreate |
Boolean
|
A value indicating if the HTML element must be recreated when there is already an element for the relevant index/key. |
addIndex |
Number
|
Position within the array where the items where added. Do not specify the index (Null/Undefined) when items where added at the end of the array. |
addCount |
Number
|
Number of items that where added to the array. |
removeIndex |
Number
|
Position within the array where the items where removed. Do not specify the index (Null/Undefined) when items where removed at the end of the array. |
removeCount |
Number
|
Number of items that where removed from the array. |
|
update |
Boolean
|
<optional>
|
The view is updated automatically after a data change. This default update behaviour can be cancelled by specifying false for this argument. |
Registers a data change for the specified model (object reference) so that the next view update will display the new data.
Parameters:
| Name |
Type |
Attributes |
Description |
model |
Object
|
|
The model of the corresponding data-bound element. |
arrayUpdateRules |
Array.<Object>
|
|
An array of updateRule objects for the array corresponding with the data-bound repeat element.
Properties
| Name |
Type |
Description |
keys |
Array.<Number>
|
Indexes or keys within the collection where items where updated. |
recreate |
Boolean
|
A value indicating if the HTML element must be recreated when there is already an element for the relevant index/key. |
addIndex |
Number
|
Position within the array where the items where added. Do not specify the index (Null/Undefined) when items where added at the end of the array. |
addCount |
Number
|
Number of items that where added to the array. |
removeIndex |
Number
|
Position within the array where the items where removed. Do not specify the index (Null/Undefined) when items where removed at the end of the array. |
removeCount |
Number
|
Number of items that where removed from the array. |
|
update |
Boolean
|
<optional>
|
The view is updated automatically after a data change. This default update behaviour can be cancelled by specifying false for this argument. |
(static) dataSend(data, serverMethodopt, clientIdopt, onDataResponseopt, updateViewopt) → {WebSocket|XMLHttpRequest}
Sends the specified data to the server through the connected websocket or new xhr connection.
Parameters:
| Name |
Type |
Attributes |
Description |
data |
Object
|
|
The JSON data request. |
serverMethod |
String
|
<optional>
|
A class type and static method (dot separated) to call on the server when executing the data request. Requires the .NET server-side Bindary framework. |
clientId |
String
|
<optional>
|
A value which is send with each data request to be able to uniquely identify clients on the server side. |
onDataResponse |
function
|
<optional>
|
An event callback method which is invoked on the response for this request. Method parameters: data (Object). |
updateView |
Boolean
|
<optional>
|
A value indicating if the view is updated after the data response. Defaults to true. |
Returns:
The WebSocket or XHR object used to transfer the data.
-
Type
-
WebSocket
|
XMLHttpRequest
(static) dataSendAsync(data, serverMethodopt, clientIdopt, updateViewopt) → {Promise.<Object>}
Sends the specified data to the server through the connected websocket or new xhr connection and returns an awaitable Promise that resolves when the response is received.
Parameters:
| Name |
Type |
Attributes |
Description |
data |
Object
|
|
The JSON data request. |
serverMethod |
String
|
<optional>
|
A class type and static method (dot separated) to call on the server when executing the data request. Requires the .NET server-side Bindary framework. |
clientId |
String
|
<optional>
|
A value which is send with each data request to be able to uniquely identify clients on the server side. |
updateView |
Boolean
|
<optional>
|
A value indicating if the view is updated after the data response. Defaults to true. |
Returns:
Resolves with the server response message.
-
Type
-
Promise.<Object>
(static) disconnect()
Disconnects the data connection.
(static) dispatchLink(anchor)
Dispatch an anchor link so that it is handled by the framework's routing. Method is only applicable when "pretty URL" is enabled.
Parameters:
| Name |
Type |
Description |
anchor |
HTMLElement
|
The anchor link tag. |
(static) dispatchLinks(containeropt)
Dispatches anchor links so that they are handled by the framework's routing. Method is only applicable when "pretty URL" is enabled.
Parameters:
| Name |
Type |
Attributes |
Description |
container |
HTMLElement
|
<optional>
|
The container element in which hyperlinks will be updated. |
(static) getAnchor() → {String}
Returns:
-
Type
-
String
(static) getBaseHref() → {String}
Gets the base href which precedes all route paths when prettyURL is enabled.
Returns:
-
Type
-
String
(static) getCache() → {Object}
Gets the internal cache object which holds views, includes, controllers, source-ready states and the routeData/viewData containers per route.
The object is returned by reference, so modifications affect the framework directly.
Returns:
-
Type
-
Object
(static) getProxyManager() → {ProxyManager}
Gets the proxy manager used to create observable objects.
Returns:
The proxy manager object.
-
Type
-
ProxyManager
Gets the template item that belongs to the specified element.
Parameters:
| Name |
Type |
Description |
The |
HTMLElement
|
element for wich to retrieve the template item. |
Returns:
-
Type
-
componyx.bindary.TemplateItem
(static) getViewContainer() → {HTMLElement}
Gets the view container element.
Returns:
The view container element.
-
Type
-
HTMLElement
(static) launch()
Launches the route for the initial route path value.
(static) loadRoute(routePathopt) → {Number}
Loads the route based on the current URL or based on the specified route path. Method is only applicable when $bindary.prettyURL is enabled.
Parameters:
| Name |
Type |
Attributes |
Description |
routePath |
String
|
<optional>
|
The route path to load. |
Returns:
-
Type
-
Number
(static) lock(dataKey, dataContaineropt)
Places a lock (on the specified dataKey and/or dataContainer) to postpone data updates until unlock is called.
Ommit parameters to lock complete data-tree or specify dataContainer only to lock container.
Parameters:
| Name |
Type |
Attributes |
Description |
dataKey |
String
|
|
The hierarchical path of the object or object value. This string value should consist of object keys separated by a '.' (dot) character (default, change via dataKeySeparatorChar) and without the data container name. |
dataContainer |
String
|
<optional>
|
One of the following data containers: appData, routeData or viewData. Defaults to viewData when dataKey is specified. |
(static) observe(obj, dataContainer, settings) → {Object}
Observes the specified object for changes (ECMAScript 6 required). This method is intended to observe objects on the global (window) scope. Observing of the appData, routeData and viewData containers can be enabled through $bindary.observing.
Parameters:
| Name |
Type |
Description |
obj |
Object
|
The object to observe. |
dataContainer |
String
|
The name of the root data-container on which the proxy object is defined. |
settings |
Object
|
An object with configuration settings for observing the object.
Properties
| Name |
Type |
Attributes |
Default |
Description |
event |
CustomEvent
|
|
|
The custom event to dispatch when a property is changed. This can be used in combination with Native WebComponents to update your custom HTML component when an object property changes. Return false from this event to cancel data-change and view update. |
createEvent |
function
|
<optional>
|
|
A factory function that returns a new CustomEvent for each change. Recommended when changes are batched, deferred, or when change isolation is required. |
eventPayload |
Object
|
|
|
The additional data included in the event.detail, providing context for the data change. |
element |
HTMLElement
|
|
|
The element on which the custom event is fired. By default, the event is fired on the document object. |
viewTree |
Array.<TemplateItem>
|
|
|
The root tree to use when updating the view after a data change. |
reuseProxy |
Boolean
|
<optional>
|
true
|
A value indicating whether a single proxy instance is shared across multiple data paths. When disabled, each path gets its own independent proxy, losing cross-path change propagation |
|
Returns:
A proxy object for template-binding on which modifications are immediately noticed and result in an update of the view.
-
Type
-
Object
Example
window.myContainer = $bindary.observe({}, 'myContainer');
(static) registerValueHandler(matcher, getValue, setValue) → {String}
Registers a value handler for data-bound elements.
Parameters:
| Name |
Type |
Description |
matcher |
ValueMatcher
|
A function that checks if the handler applies for the specified template item. |
getValue |
ValueGetter
|
A function that retrieves the value from the element. |
setValue |
ValueSetter
|
A function that sets the value on the element. |
Returns:
The id of the registered handler (needed in case of removal).
-
Type
-
String
(static) removeTemplateItem(element)
Removes a data-bound template item.
Parameters:
| Name |
Type |
Description |
element |
HTMLElement
|
The original element. |
(static) renderView(update, viewTree)
Renders the view tree using data-bound template items.
Important: This method should only be called during an active render cycle, otherwise use updateViewDelayed() or updateView() instead.
Note that unlike updateView(), this method does not trigger preRender or postRender events.
Parameters:
| Name |
Type |
Description |
update |
Boolean
|
A value indicating if this is an update. |
viewTree |
Array.<TemplateItem>
|
The view tree to create. |
(static) setCustomPrefix(prefixopt)
Sets and uses a custom prefix to use for the 'data-bindary-' attributes.
Parameters:
| Name |
Type |
Attributes |
Description |
prefix |
String
|
<optional>
|
The custom attribute prefix to use. |
(static) startObserving()
Restarts observing for data-changes on observed objects.
(static) stopObserving()
Stops observing for data-changes on observed objects until startObserving() is called.
(static) unlock(dataKey, dataContaineropt, ignoreopt, updateopt)
Removes the lock (on the specified dataKey and/or dataContainer) to re-enable data updates.
Ommit parameters to unlock complete data-tree or specify dataContainer only to unlock container.
Parameters:
| Name |
Type |
Attributes |
Description |
dataKey |
String
|
|
The hierarchical path of the object or object value. This string value should consist of object keys separated by a '.' (dot) character (default, change via dataKeySeparatorChar) and without the data container name. |
dataContainer |
String
|
<optional>
|
One of the following data containers: appData, routeData or viewData. Defaults to viewData when dataKey is specified. |
ignore |
Boolean
|
<optional>
|
A value indicating that previous received data must be ignored. |
update |
Boolean
|
<optional>
|
The view is updated automatically after the unlock. This default update behaviour can be cancelled by specifying false for this argument. |
(static) unregisterValueHandler(id)
Unregisters a value handler.
Parameters:
| Name |
Type |
Description |
id |
String
|
The id of the handler to remove. |
(static) updateTemplateItem(element, deepopt, clearopt)
Creates or updates a data-bound template item. The item will be rendered on the next view update.
Parameters:
| Name |
Type |
Attributes |
Default |
Description |
element |
HTMLElement
|
|
|
An HTML element having attributes to serve as data-bound template item. |
deep |
Boolean
|
<optional>
|
false
|
A value indicating if child elements should be updated. |
clear |
Boolean
|
<optional>
|
false
|
A value indicating if child items must be cleared. |
(static) updateView(complete, redetectTemplateElements, viewTreeopt)
(Re)Renders the view with the active data objects.
Parameters:
| Name |
Type |
Attributes |
Description |
complete |
Boolean
|
|
A value indicating if the view must be refreshed completely instead of checking for registered data changes. |
redetectTemplateElements |
Boolean
|
|
A value indicating if the template elements should be redetected. Make sure keep attributes is set to true, either globally or on the elements, otherwise these elements are not redetected. |
viewTree |
Array.<TemplateItem>
|
<optional>
|
The root template items for the view tree, from which the update will propagate. |
(static) updateViewDelayed(complete, redetectTemplateElementsopt, viewTreeopt)
(Re)Renders the view with the active data objects. The delayed update call is placed at the end of the execution queue through setTimeout()
Parameters:
| Name |
Type |
Attributes |
Description |
complete |
Boolean
|
|
A value indicating if the view must be refreshed completely instead of checking for registered data changes. |
redetectTemplateElements |
Boolean
|
<optional>
|
A value indicating if the template elements should be redetected. |
viewTree |
Array.<TemplateItem>
|
<optional>
|
The root template items for the view tree, from which the update will propagate. |
Type Definitions
Type:
Properties:
| Name |
Type |
Attributes |
Description |
el |
HTMLElement
|
<optional>
|
The anchor element. |
CancelToken
Type:
Properties:
| Name |
Type |
Description |
cancel |
boolean
|
Set to true to cancel the event. |
DataRequestEventArgs
Type:
Properties:
| Name |
Type |
Description |
dataRequest |
string
|
The requested data identifier. |
routeReady |
function
|
Callback to continue route loading. |
cancelToken |
componyx.bindary.CancelToken
|
Token to cancel loading. |
ErrorEventArgs
Type:
Properties:
| Name |
Type |
Description |
error |
Object
|
The error object returned by the server. |
HTMLAttributes
Bindary HTML data-attributes.
Type:
Properties:
| Name |
Type |
Attributes |
Description |
"data-bindary-context" |
String
|
<optional>
|
This attribute sets the data-context (object scope) for the element and its child-elements through the data-key. |
"data-bindary-value" |
String
|
<optional>
|
This attribute sets the inner text value of the element through the data-key. |
"data-bindary-html" |
String
|
<optional>
|
This attribute sets the inner HTML value of the element through the data-key. By default the HTML data is sanitized unless specified as trusted data. Use trust:data-key for own (not user defined) HTML data-sources or enable $bindary.trustHTML to trust all data provided through data-bindary-html. |
"data-bindary-bind" |
String
|
<optional>
|
This attribute enables two-way data-binding for input elements (input, textarea, select) through the data-key. Two-way data binding means that, apart from the element's value being updated when the data changes (either automatically or by manual registering), the data is updated as well when the element value changes. |
"data-bindary-live" |
String
|
<optional>
|
This attribute enables live binding per element. Use "false" to disable live binding, "true" or empty to enable and use the global delay ($bindary.liveBindDelay), or a number (as string) to enable and set a custom delay in ms. Active on the element and its child elements. |
"data-bindary-type" |
String
|
<optional>
|
This attribute can be used in conjunction with the bind/value attribute to define the data-type of the corresponding data value when the type is not a string. The supported data-types are boolean, number and date. For number, an optional precision can be specified: number(2) overrides the global decimalPrecision for this binding. |
"data-bindary-attributes" |
String
|
<optional>
|
This attribute sets element attributes that require data-binding. Wrap the data-key inside curly brackets when custom text in the HTML attribute is desired. |
"data-bindary-has-value" |
String
|
<optional>
|
This attribute without value defines that the element is rendered when the current data context is NOT empty, null or undefined. A data-key value can be specified when a different value than the current context should determine if the element will be rendered. |
"data-bindary-repeat" |
String
|
<optional>
|
This attribute enables collection data-binding through the data-key. |
"data-bindary-repeat-item-id" |
String
|
<optional>
|
This attribute can be used in conjunction with the repeat attribute. The data-key value specifies which item property of the bound collection serves as the item-template identifier. |
"data-bindary-item-id" |
String
|
<optional>
|
This attribute sets the value for matching the item property specified through repeatItemId. The element will be rendered when the property value of the collection item matches the attribute value. |
"data-bindary-filter" |
String
|
<optional>
|
This attribute can be used in conjunction with the repeat attribute to bind a (controller) function to filter the collection before rendering. |
"data-bindary-view-formatter" |
String
|
<optional>
|
This attribute can be used in conjunction with the value or html attribute to bind a (controller) function to format the data value when the element is rendered. |
"data-bindary-data-formatter" |
String
|
<optional>
|
This attribute can be used in conjunction with the bind attribute to bind a (controller) function to format the input value when data binding occurs. |
"data-bindary-includable" |
String
|
<optional>
|
This attribute marks an element as includable template-item (no attribute value required). |
"data-bindary-include" |
String
|
<optional>
|
This attribute includes the contents of an element or file. Use '#element-id' or 'data.key' (dynamic element-id value) to reference an element marked with the includable attribute by id. To reference a file use 'file:path'. |
"data-bindary-component" |
String
|
<optional>
|
This attribute can be used in conjunction with the include attribute (file:path) and marks the included file content as component. The attribute value must contain the name of the component. The file must include JavaScript code to register the Bindary component, through $bindary.addComponent(), providing the component name (matching the component attribute value) and an initiator function. |
"data-bindary-observe" |
String
|
<optional>
|
This attribute can be used in conjunction with the component attribute. The data-key value specifies which item property of the component's context will be automatically observed for data changes, triggering view updates when changes occur. |
"data-bindary-load" |
String
|
<optional>
|
This attribute can be used in conjunction with the include attribute (file:path) for binding a (controller) function to invoke when the file contents have been loaded. |
"data-bindary-pre-render" |
String
|
<optional>
|
This attribute can be used to bind a (controller) function to invoke before the element is rendered. The element is not rendered if the method returns false. |
"data-bindary-if" |
String
|
<optional>
|
This attribute can be used to bind a (controller) function to execute a conditional if statement. The element is not rendered if the method returns false. |
"data-bindary-else-if" |
String
|
<optional>
|
This attribute can be used to bind a (controller) function to execute a conditional else if statement. The element is not rendered if the method returns false. |
"data-bindary-else" |
String
|
<optional>
|
This attribute determines that the element is rendered when the conditional if or elseif statements returned false. |
"data-bindary-post-render" |
String
|
<optional>
|
This attribute can be used to bind a (controller) function to invoke after the element is rendered. The element is not visible if the method returns false. |
"data-bindary-on" |
String
|
<optional>
|
This attribute can be used to bind a (controller) function to any HTML event. |
"data-bindary-update-id" |
String
|
<optional>
|
This attribute sets a unique identifier to use when registering data changes for a specific element. |
"data-bindary-keep" |
String
|
<optional>
|
This attribute can be used to define if the data-bindary- attributes are removed (no value) or remain (value "true") on the element after it has been discovered by the framework. Active on the element and its child elements. |
"data-bindary-view" |
String
|
<optional>
|
This valueless attribute marks an HTML element as root container for requested views. |
"data-bindary-ignore" |
String
|
<optional>
|
This valueless attribute marks an HTML element and its child elements with data-bindary attributes to be ignored. This can be used to activate templates at a desired moment and for such purpose the intended 'include' attribute is not desired. |
LoadEventArgs
Type:
Properties:
| Name |
Type |
Attributes |
Description |
data |
Object
|
<optional>
|
The loaded route data. |
PostDataBindEventArgs
Type:
Properties:
| Name |
Type |
Description |
templateItem |
componyx.bindary.TemplateItem
|
The template item. |
field |
HTMLElement
|
The field element. |
model |
Object
|
The data model. |
value |
any
|
The bound value. |
PostDataUpdateEventArgs
Type:
Properties:
| Name |
Type |
Attributes |
Description |
data |
Object
|
<optional>
|
The updated data object. |
PreDataBindEventArgs
Type:
Properties:
PreDataUpdateEventArgs
Type:
Properties:
PreLoadEventArgs
Type:
Properties:
ProxyManager
Type:
Properties:
| Name |
Type |
Description |
isProxy |
function
|
Returns true if the object is a proxy. |
getTarget |
function
|
Gets the underlying target of the given proxy. |
Route
Type:
Properties:
| Name |
Type |
Attributes |
Description |
path |
String
|
RegEx
|
|
The route path to map. A string to map an exact route or a regex to map a dynamic route. Capture groups from the path with the regex and use them with $groupnumber in the URL, dataRequest and controller method settings. |
controllerURL |
String
|
<optional>
|
URL of the controller js file. |
viewURL |
String
|
<optional>
|
URL of the template view. |
data |
String
|
Object
|
<optional>
|
JSON data to send with the data load (XHR or WS). |
dataConnect |
Boolean
|
<optional>
|
A value indicating if the data source will be connected (default) or disconnected when this route is active. |
observing |
Boolean
|
<optional>
|
A value indicating if changes are being observed for the routeData and viewData data-containers (ECMAScript 6 required). |
controllerLoad |
String
|
<optional>
|
Name of the controller method invoked after loading the required route data and sources. |
controllerPreDataBind |
String
|
<optional>
|
Name of the controller method invoked before the data bind action is executed. Defaults to 'preDataBind'. @see componyx.bindary.PreDataBindEventArgs |
controllerPostDataBind |
String
|
<optional>
|
Name of the controller method invoked after the data bind action is executed. Defaults to 'postDataBind'. @see componyx.bindary.PostDataBindEventArgs |
controllerPreDataUpdate |
String
|
<optional>
|
Name of the controller method invoked when data is received but before the client data is updated. The data object is passed as single argument. Use false as method return value to cancel further processing of the data object. Defaults to 'preDataUpdate'. |
controllerPostDataUpdate |
String
|
<optional>
|
Name of the controller method invoked after the data is updated. Defaults to 'postDataUpdate'. |
controllerPreRender |
String
|
<optional>
|
Name of the controller method invoked every time before the view is rendered. Defaults to 'preRender'. |
controllerPostRender |
String
|
<optional>
|
Name of the controller method invoked every time after the view is rendered. Defaults to 'postRender'. |
controllerPostLoad |
String
|
<optional>
|
Name of the controller method invoked when the route is loaded. Defaults to 'postLoad'. |
controllerUnload |
String
|
<optional>
|
Name of the controller method invoked when the route is unloaded because a new route is requested. The routeIndex and routePath of the requested route are passed as arguments. A value of true/null/undefined to unload the current route and load the requested route or false to cancel the unload and keep the current route active. Defaults to 'unLoad'. |
dataServerLoad |
String
|
<optional>
|
A class type and static method (dot separated) to invoke on the server to load data. Requires the .NET server-side Bindary framework. |
dataServerUnload |
String
|
<optional>
|
A class type and static method (dot separated) to invoke on the server to unload data. Requires the .NET server-side Bindary framework. |
RouteErrorEventArgs
Type:
Properties:
| Name |
Type |
Attributes |
Description |
type |
string
|
|
What failed: 'route' (no route matches the route path), 'view' or 'controller'. |
status |
number
|
<optional>
|
The HTTP status of the failed request, for 'view' and 'controller' when available. |
url |
string
|
<optional>
|
The URL of the view or controller that failed to load. |
routePath |
string
|
|
The route path that was requested. |
UnloadEventArgs
Type:
Properties:
| Name |
Type |
Description |
routeIndex |
number
|
The index of the route being unloaded. |
routePath |
string
|
The path of the route being unloaded. |
cancelToken |
componyx.bindary.CancelToken
|
Token to cancel unloading. |
pageHide |
boolean
|
A value indicating if this unload was caused by the page hide event, rather than an in-app route change. |
ValueGetter(element) → {string}
A function that retrieves the value from an element.
Parameters:
| Name |
Type |
Description |
element |
HTMLElement
|
The target element from which the value should be retrieved. |
Returns:
The extracted value from the element.
-
Type
-
string
ValueMatcher(item) → {boolean}
A function that determines if the handler applies to a specific template item or element.
Parameters:
Returns:
True if the handler should handle this, otherwise false.
-
Type
-
boolean
ValueSetter(element, value)
A function that sets the value on an element.
Parameters:
| Name |
Type |
Description |
element |
HTMLElement
|
The target element on which the value should be set. |
value |
string
|
The value to set on the element. |
VisibilityChangeEventArgs
Type:
Properties:
| Name |
Type |
Description |
visible |
boolean
|
Whether the document is now visible. |
cancelToken |
componyx.bindary.CancelToken
|
Token to cancel the default visibility action. The default action checks if there is an open websocket connection and if so it will send a request to the server to update the websocket object on the client. |
WebSocketEventArgs
Type:
Properties:
| Name |
Type |
Description |
socket |
WebSocket
|
The WebSocket instance. |
event |
Event
|
The native event object. |
dataContainer
The data container is part of the data response and holds data and optionally rules for at least one data container.
Type:
Properties:
| Name |
Type |
Attributes |
Description |
appData |
Object
|
<optional>
|
The app data. |
routeData |
Object
|
<optional>
|
The route data. |
viewData |
Object
|
<optional>
|
The view data. |
appDataRules |
dataRules
|
<optional>
|
Data rules for app data. |
routeDataRules |
dataRules
|
<optional>
|
Data rules for route data. |
viewDataRules |
dataRules
|
<optional>
|
Data rules for view data. |
dataRequestType
The data request is a JSON serialized object sent to the backend data server.
Type:
Properties:
| Name |
Type |
Attributes |
Description |
clientId |
String
|
<optional>
|
The id of the active client. |
routeIndex |
Number
|
|
The index of the active route. |
routePath |
String
|
|
The path of the active route. |
serverMethod |
String
|
|
A class type and static method (dot separated) to call on the server when executing the data request. Requires the .NET server-side Bindary framework. |
callbackId |
Number
|
|
The identifier of the client callback method to invoke when the data request has finished. |
initialLoad |
Number
|
|
A value indicating if this is the route's initial load. |
data |
Object
|
|
The custom data object. |
dataResponse
The data response is a JSON serialized object returned from a backend data server.
Type:
Properties:
| Name |
Type |
Attributes |
Description |
clientId |
String
|
<optional>
|
The id of the active client. |
callbackId |
Number
|
|
The identifier of the client callback method to invoke when the data request has finished. |
isError |
String
|
|
A value indicating that an error occurred. |
data |
dataContainer
|
|
An object which holds the data and data-rules. |
dataRules
The data rules define how data from the server is updated on the client.
Type:
Properties:
| Name |
Type |
Description |
routeIndex |
string
|
The route index for updating route data on a different route than the currently active route. |
routePath |
string
|
The route path for updating view data on a different view than the currently active view. |
path |
string
|
The hierarchical path on the target object where the source object will be added/updated. |
updateKey |
number
|
The key used to match and update items on the target array. The array item is updated when the value on both source and target of specified key matches. |
removeByKeyValues |
Array.<string>
|
A collection of key values to remove. Items on the target client object with a matching value for the specified UpdateKey will be removed. |
addIndex |
number
|
The position within the array where the items must be added. Do not specify the index (Null/Undefined) when items must be added at the end of the array. |
removeIndex |
number
|
The position within the array where the items must be removed. Do not specify the index (Null/Undefined) when items must be removed at the end of the array. |
removeCount |
number
|
The number of items to remove from the target array. |
ignoreNullValues |
number
|
A value indicating if null values in the response data will be ignored. |
update |
boolean
|
A value indicating if server data overwrittes (false) or updates (true) data on the client. |
recreate |
boolean
|
A value indicating if the HTML element must be recreated when there is already an element for the relevant index/key. |
omitKeys |
Object.<string, object>
|
A collection of keys to omit on the target client object. |
elementInfo
Type:
Properties:
| Name |
Type |
Description |
name |
String
|
The name of the element. |
isInput |
Boolean
|
A value indicating if the element is an input. |
isTextarea |
Boolean
|
A value indicating if the element is a textarea. |
isSelect |
Boolean
|
A value indicating if the element is a select. |
isCheck |
Boolean
|
A value indicating if the element is a checkbox. |
isRadio |
Boolean
|
A value indicating if the element is a radiobutton. |