Bindings | Code | Cyclops: The UX/UI Pattern Guide

`any`

Supports Virtual Elements: YES

This is short hand for an if binding that looks at length

  
<!-- ko any: value -->
show only if there are items
<!-- /ko -->

Options

Name	Type	Default	Description
value	array \| observable array	undefined	If there are items in the value the contents are shown

`asyncMessage`

Supports Virtual Elements: NO

Used to display notification to the end user that an action is taking place. Mainly used in conjunction with remote validation.

  
<p data-bind="asyncMessage: trueFalseObservable" />
<!-- with options -->
<p data-bind="asyncMessage: { value: trueFalseObservable }" />

Options

Name	Type	Default	Description
value	observable boolean	undefined	should a validating message me shown
validating	html string \| observable html string	checking availability...	HTML to be displayed when value is true
valid	html string \| observable html string	available	HTML to be displayed when value is valid

`console`

Supports Virtual Elements: YES

Prints the object out on the console. should only be used when debuging.

  
<!-- ko console: value --><!-- /ko -->

Options

Name	Type	Default	Description
value	any \| observable any	undefined	the object that is passed to console.log

`empty`

Supports Virtual Elements: YES

This is short hand for an if binding that looks at length

  
<!-- ko empty: value -->
There are no items
<!-- /ko -->

Options

Name	Type	Default	Description
value	array \| observable array	undefined	If there are no items in the value the contents are shown

`fadeSlide`

Supports Virtual Elements: NO

When the value is true the element will be slide down at the same time it is faded in. When the value is false the element is slide up and faded out.

  
<div data-bind="fadeSlide: trueFalseObservable" />
<!-- with options -->
<div data-bind="fadeSlide: { visible: trueFalseObservable }" />

Options

Name	Type	Default	Description
visible	observable boolean	false	Should the element be visible
duration	number	300	number of milliseconds for the animation to complete
afterAnimation	function	undefined	Will be called after the slide fade animations completes

`fadeVisible`

Supports Virtual Elements: NO

When the value is true the element will be faded in. When the value is false the element faded out.

  
<div data-bind="fadeVisible: trueFalseObservable" />
<!-- with options -->
<div data-bind="fadeVisible: { visible: trueFalseObservable }" />

Options

Name	Type	Default	Description
visible	observable boolean	false	Should the element be visible
duration	number	300	number of milliseconds for the animation to complete
afterAnimation	function	undefined	Will be called after the fade animation completes

`href`

Supports Virtual Elements: NO

This is short hand for an attr binding that sets the href attribut

  
<a data-binding='href: model.url'></a>

Options

Name	Type	Default	Description
value	string \| observable string	undefined	url to place in the href

`indeterminate`

Supports Virtual Elements: NO

Allows you to set an indeterminate state to a checkbox or radio button, which can only be done programmatically.

    
<input type='cehckbox' data-binding='indeterminate: model.isIndeterminate'></input>

Options

Name	Type	Default	Description
value	boolean \| observable boolean	false	should the element be marked as indeterminate

`templateSwitcher`

Supports Virtual Elements: YES

Will switch out templates based on the value, loading, and error properties. This saves you from having to write a bunch of if logic to pick the template you want to display. This binding is heavily used in the listview control

  
<div data-bind='templateSwitcher: { value: ArrayOrObject, loading: loadingProp, error: hasRequestErrored, templates :{ display:"templateName"} }'></div>

Options

Name	Type	Default	Description
value	any \| observable any	undefined	value that will be passed to the display template
loading	boolean \| observable boolean	false	when true the loading template is displayed
error	boolean \| observable boolean	false	when true the error template is displayed
templates.display	string \| observable string	undefined	will be called with value if error and loading are false
templates.empty	string \| observable string	cyclops.templateSwitcherEmptyTemplate	if value is an array and it is empty this template will be called
templates.loading	string \| observable string	cyclops.templateSwitcherLoadingTemplate	will be called when loading is true
templates.error	string \| observable string	cyclops.templateSwitcherErrorTemplate	will be called when error is true

`Title`

Supports Virtual Elements: NO

Set the title attribute of the element. This is just shorthand for the attr binding.

    
<span data-binding='title: model.helpfulTitle'></sapn>

Options

Name	Type	Default	Description
value	string \| observable string	false	The text to use as the title

`scrollTo`

Supports Virtual Elements: NO

Should the element be scrolled into view.

    
<span data-binding='scrollTo: model.isCurrentItem'></sapn>

Options

Name	Type	Default	Description
value	boolean \| observable boolean	false	if true the item will be scrolled to in the browser

`validationMsg`

Supports Virtual Elements: NO

Same as the knockout-validation validationMessage binding but has a nice animation when displaying or hiding the message.

  
<p data-bind="validationMsg: someValue" />

Options

Name	Type	Default	Description
value	any \| observable any	undefined	value that is being validated

`widget`

Supports Virtual Elements: NO

Creates jQuery widgets based on the name and options passed in. This is relatively expensive so it should be used with caution but it can be very handy. Technically it doesn’t have to be a jQuery widget just a function that hangs off a dom node but it works best when it follows the jQuery widget conventions.

  
    <input type="submit" value="OK" data-bind='widget: "button"' />
    <!-- with options -->
    <input id='search' data-bind='widget: { name: "autocomplete", options: { source: searchCompletions(), delay: 500 } }, value: searchString' />
    <!-- enable or disable -->
    <input id='search' data-bind='widget: { name: "autocomplete", disabled: trueyOrFalsey, value: searchString' />

Options

Name	Type	Default	Description
name	string \| observable string	undefined	name of the widget or function
disabled	boolean \| observable boolean	false	calls the widgets disable funtion
enabled	boolean \| observable boolean	false	calls the widgets disable funtion with false and wires everything back up
options	any \| observable any	empty object	any options for the widget