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

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

console

Supports Virtual Elements: YES

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

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

Options

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

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

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

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

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

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

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

scrollTo

Supports Virtual Elements: NO

Should the element be scrolled into view.

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

Options

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

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