Tutorial by Examples

The text binding can be used with any element to update it's innerText. <p> <span data-bind="text: greeting"></span>, <span data-bind="text: subject"></span>. </p> ko.applyBindings({ greeting: ko.observable("Hello"), ...

This binding will apply the supplied CSS class to the element. Static classes are applied when the given conditions are loosely-evaluated to true. Dynamic classes use the value of an observable or computed. page.html <p data-bind="css: { danger: isInDanger }">Checks external expres...

Can be used to show/hide DOM elements. Similar to using if, except that visible will still build the element and set display:none. <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> ...

Use the attr binding to apply any additional attributes to your element. Most commonly used for setting an href, src, or any data-attributes. <img data-bind="attr: { src: url, title: title }"/> var viewModel = { url: ko.observable("images/example.png"), title:...

This binding updates the innerHTML of the element using jQuery.html(), if jQuery has been referenced, otherwise, KO's own parsing logic. It can be useful if retrieving HTML from an API, RSS feed, etc. Be mindful of using this tag with user input HTML. page.html <p> <span data-bind=&qu...