WinJS Contrib Namespace: Bindings

Custom WinJS Bindings

Source:

winjscontrib.bindings.js, line 11

Members

<static> pictureUnavailable

path for default picture

Source:

winjscontrib.bindings.js, line 20

Methods

<static> addClass(source, sourceProperty, dest, destProperty)

Binding function to add css class named after object property. You could format class by using a "format" argument

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 122

<static> asClass(source, sourceProperty, dest, destProperty)

add css class based on a prefix defined with destProperty and the value from the source object

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 149

<static> bindingArguments(element, argument)

Helper for reading arguments for an element

Parameters:

Name	Type	Description
`element`	HTMLElement
`argument`	string	name

Source:

winjscontrib.bindings.js, line 27

<static> calendar(source, sourceProperty, dest, destProperty)

format date using calendar function

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.date.utils.js, line 50

<static> dataAttr(source, sourceProperty, dest, destProperty)

Binding function to add a data-* attribute to the element. Use the destination name to specifiy attribute name

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 109

Example

//assuming object is { myproperty: 42 }

//will result to

<static> daysSinceDate(source, sourceProperty, dest, destProperty)

display number of days since a date

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.date.utils.js, line 94

<static> disableIf(source, sourceProperty, dest, destProperty)

disable element if property is filled or true

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 391

<static> ellipsisize(source, sourceProperty, dest, destProperty)

truncate a string and add ellipse to the text if string is longer than a limit. The max size of text is determined by a 'ellipsisize' argument

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 440

Example

{@lang xml}

<static> enableIf(source, sourceProperty, dest, destProperty)

enable element if property is filled or true

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 367

<static> formatDate(source, sourceProperty, dest, destProperty)

format date using binding argument 'formatDate'

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.date.utils.js, line 25

<static> hideIf(source, sourceProperty, dest, destProperty)

hide element if property is filled or true. The dest property can be used to choose what to use for showing/hiding object (opacity, visibility, or display)

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 315

<static> hideIfNot(source, sourceProperty, dest, destProperty)

Alias for WinJSContrib.Bindings.showIf, just for semantic purpose

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 304

See:

WinJSContrib.Bindings.showIf

<static> humanizeDate(source, sourceProperty, dest, destProperty)

apply moment.js humanize formatting on a date. Use 'humanizeFormat' and 'addSuffix' arguments to configure binding

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.date.utils.js, line 121

<static> itemTap(source, sourceProperty, dest, destProperty)

Add tap by looking for a function in parent scope control, and add binded item to tap callback

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 501

<static> picture(source, sourceProperty, dest, destProperty)

Asynchronously load a picture (using src for image tag and background-image for other elements) from url path, and add 'imageLoaded' css class once picture is ready. You could rely on '.imageLoaded' to add transitions for image loading

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 231

<static> removeHTML(source, sourceProperty, dest, destProperty)

Binding function to remove HTML from data and add it to destination

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 56

<static> removeHTMLAndEllipsisize(source, sourceProperty, dest, destProperty)

Binding function to remove HTML from data and add it to destination with an ellipse after X characters. The number of characters is specified with "ellipsisize" argument

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 71

<static> showClassIf(source, sourceProperty, dest, destProperty)

add css class based on truthy/falsy value from the source object css class has to be precised through data-win-bind-args='{"className": ""}' attribute

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 169

<static> showIf(source, sourceProperty, dest, destProperty)

show element if property is filled or true. The dest property can be used to choose what to use for showing/hiding object (opacity, visibility, or display)

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 264

<static> showIfNot(source, sourceProperty, dest, destProperty)

Alias for WinJSContrib.Bindings.hideIf, just for semantic purpose

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 355

See:

WinJSContrib.Bindings.hideIf

<static> staticHTML(source, sourceProperty, dest, destProperty)

Binding function to remove HTML from data and add it to destination with an ellipse after X characters. The number of characters is specified with "ellipsisize" argument

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 91

<static> toBgImage(source, sourceProperty, dest, destProperty)

convert a url string for use as a background image url

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 190

<static> toWidth(source, sourceProperty, dest, destProperty)

apply a percent number as width (in percent) on the element

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 415

<static> twoWayOnChange(source, sourceProperty, dest, destProperty)

Two way binding triggered by "change" event on inputs

Parameters:

Name	Type	Description
`source`	Object	object owning data
`sourceProperty`	string[]	path to object data
`dest`	HTMLElement	DOM element targeted by binding
`destProperty`	string[]	path to DOM element property targeted by binding

Source:

winjscontrib.bindings.js, line 465