Class: AttributeBindings

conbo.AttributeBindings()

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.
Author:
  • Neil Rackett
Source:

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
Source:
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)
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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 *
Source:

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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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
Source:
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