new AttributeBindings()
Attribute Bindings
Functions that can be used to bind DOM elements to properties of Bindable
class instances to DOM elements via their attributes.
Extends
Members
supro
Similar to `super` in ActionScript or Java, this property enables
you to access properties and methods of the super class prototype,
which is the case of JavaScript is the next prototype up the chain
- Inherited From:
- Source:
Methods
bindAll(…methodNameopt) → {this}
Scope all methods of this class instance to this class instance
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
methodName |
string |
<optional> <repeatable> |
Specific method names to bind (all will be bound if none specified) |
- Inherited From:
- Source:
Returns:
- Type
- this
canHandleMultiple(attribute) → {Boolean}
Can the given attribute be bound to multiple properties at the same time?
Parameters:
Name | Type | Description |
---|---|---|
attribute |
string |
Returns:
- Type
- Boolean
cbAria(el, value, options, ariaName) → {void}
Sets the aria accessibility attributes on an element based on the value
of the bound property, e.g. cb-aria="myProperty:label" to set aria-label
to the value of myProperty
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
options |
* | |
ariaName |
string | The name of the aria value to set (without the aria- prefix) |
Returns:
- Type
- void
Example
<div cb-class="ariaLabel:label"></div>
cbClass(el, value) → {void}
Applies or removes a CSS class on an element based on the value
of the bound property, where cb-class="myProperty:class-name" will apply
the class "class-name" when "myProperty" is a truthy value, or
cb-class="myProperty" will apply the class "myProperty" when "myProperty"
is a truthy value
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-class="propertyName"></div>
<div cb-class="propertyName:my-class-name"></div>
cbClasses(el, value) → {void}
Applies class(es) to the element based on the value contained in a variable.
Experimental.
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-classes="propertyName"></div>
cbData(el, value) → {void}
When used with a standard DOM element, the properties of the element's
`dataset` (it's `data-*` attributes) are set using the properties of the
object being bound to it; you'll need to use a polyfill for IE <= 10
When used with a Glimpse, the Glimpse's `data` property is set to
the value of the bound property.
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-data="propertyName"></div>
cbDataset(el, value) → {void}
Sets the properties of the element's dataset (it's `data-*` attributes)
using the properties of the object being bound to it. Non-Object values
will be disregarded. You'll need to use a polyfill for IE <= 10.
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-dataset="propertyName"></div>
cbDetectChange(el) → {void}
Detects changes to the specified element and applies the CSS class
cb-changed or cb-unchanged to the parent form, depending on whether
the contents have changed from their original value.
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
Returns:
- Type
- void
Example
<div cb-detect-change></div>
cbEnabled(el, value) → {void}
The exact opposite of HTML's built-in `disabled` property
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-enabled="propertyName"></div>
cbExclude(el, value) → {void}
Remove an element from the screen and prevent it having an effect
on the layout of the page
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-exclude="propertyName"></div>
cbExcludeFrom(el, value, options) → {void}
Removes the specified element from the layout when the View's `currentState`
matches one of the states listed in the attribute's value; multiple states should
be separated by spaces
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
options |
Object | Options relating to this binding |
Returns:
- Type
- void
Example
<div cb-exclude-from="confused frightened"></div>
cbHide(el, value) → {void}
Hides an element by making it invisible, but does not remove
if from the layout of the page, meaning a blank space will remain
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-hide="propertyName"></div>
cbHtml(el, value) → {void}
Inserts raw HTML into the element, which is rendered as HTML
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-html="propertyName"></div>
cbInclude(el, value) → {void}
Include an element on the screen and in the layout of the page
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-include="propertyName"></div>
cbIncludeIn(el, value, options) → {void}
Only includes the specified element in the layout when the View's `currentState`
matches one of the states listed in the attribute's value; multiple states should
be separated by spaces
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
options |
Object | Options relating to this binding |
Returns:
- Type
- void
Example
<div cb-include-in="happy sad elated"></div>
cbJshref(el) → {void}
Uses JavaScript to open an anchor's HREF so that the link will open in
an iOS WebView instead of Safari
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
Returns:
- Type
- void
Example
<div cb-jshref="propertyName"></div>
cbKeep(el, value) → {void}
The opposite of `cbRemove`
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-keep="propertyName"></div>
cbMaxChars(el, value) → {void}
Limits the number of characters that can be entered into
input and other form fields
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
string | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-max-chars="propertyName"></div>
cbOnbind(el, value) → {void}
Enables the use of cb-onbind attribute to handle the 'bind' event
dispatched by the element after it has been bound by Conbo
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-onbind="functionName"></div>
cbOnlongpress(el, handler)
Enables you to detect and handle a long press (500ms) on an element
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
handler |
function | The method that will handle long presses |
Example
<button cb-onlongpress="myLongPressHandler">Hold me!</button>
cbRef(el, value, options)
Sets the value of the specified property of the View instance to a reference
to the element with this attribute set
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | HTML Element |
value |
String | Name of the property to set as a reference to the element |
options |
* |
cbRemove(el, value) → {void}
Completely removes an element from the DOM based on a bound property value,
primarily intended to facilitate graceful degredation and removal of desktop
features in mobile environments.
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Examples
cb-remove="isMobile"
<div cb-remove="propertyName"></div>
cbRepeat(el, value, options, itemRendererClassName) → {void}
Repeats the element once for each item of the specified list or Array,
applying the specified Glimpse or View class to the element and passing
each value to the item renderer as a "data" property.
The optional item renderer class can be specified by following the
property name with a colon and the class name or by using the tag name.
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
options |
Object | Options relating to this binding |
itemRendererClassName |
string | The name of the class to apply to each item rendered |
Returns:
- Type
- void
Example
<li cb-repeat="people" cb-html="data.firstName"></li>
<li cb-repeat="people:PersonItemRenderer">{{data.firstName}}</li>
<person-item-renderer cb-repeat="people"></person-item-renderer>
cbRestrict(el, value) → {void}
Restricts text input to the specified characters
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
string | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-restrict="propertyName"></div>
cbShow(el, value) → {void}
Makes an element visible
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-show="propertyName"></div>
cbStyle(el, value, options, styleName) → {void}
Apply styles from a variable
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
options |
Object | Options relating to this binding |
styleName |
string | The name of the style to bind |
Returns:
- Type
- void
Example
<div cb-="propertyName:font-weight"></div>
cbText(el, value) → {void}
Inserts text into the element so that it appears on screen exactly as
it's written by converting special characters (<, >, &, etc) into HTML
entities before rendering them, e.g. "8 < 10" becomes "8 < 10", and
line breaks into
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
value |
* | The value referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-text="propertyName"></div>
cbValidate(el, validator) → {void}
Use a method or regex to validate a form element and apply a
cb-valid or cb-invalid CSS class based on the outcome
Parameters:
Name | Type | Description |
---|---|---|
el |
HTMLElement | DOM element to which the attribute applies |
validator |
function | The function referenced by the attribute |
Returns:
- Type
- void
Example
<div cb-validate="functionName"></div>
declarations() → {void}
Declarations is used to declare instance properties used by this class
Parameters:
Type | Attributes | Description |
---|---|---|
* |
<repeatable> |
- Inherited From:
- Source:
Returns:
- Type
- void
destroy() → {void}
Clean everything up ready for garbage collection (you should override in your own classes)
- Inherited From:
- Source:
Returns:
- Type
- void
initialize() → {void}
Initialize (entry point) is called immediately after the constructor has completed
Parameters:
Type | Attributes | Description |
---|---|---|
* |
<repeatable> |
- Overrides:
- Source:
Returns:
- Type
- void
preinitialize() → {void}
Preinitialize is called before any code in the constructor has been run
Parameters:
Type | Attributes | Description |
---|---|---|
* |
<repeatable> |
- Inherited From:
- Source:
Returns:
- Type
- void
toString() → {string}
String representation of the current class
- Inherited From:
- Source:
Returns:
- Type
- string