Bindings

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

fadeSlideTemplate

Supports Virtual Elements: NO

Works just like the knockout template binding but will fade and slide in changes in templates. Note that this only happens on changes to the template name and does not happen on the first render.

    
  <li data-bind="fadeSlideTemplate: templateName"><li/>
  <!-- with options -->
  <li data-bind="fadeSlideTemplate: { name: templateName, data: model.user }"><li/>
    
  

Options

Supports all the options of the knockout template binding

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
anchor link to top of page