In our previous post Dynamic UI Using Observables with MVVM Using Knockout.js, you learned how you get started with Knockout.js and how you can detect and respond to changes on one object using observables.
Knockout provides ways to bind the data you specify in the data-bind attribute to the element. You can apply bindings to the text and appearance, use them in the logic you use to display items, and working with form fields.
In addition, you can create your own custom bindings.
Let’s see how.
Controlling Text, Appearance Using Bindings
You can bind the the firstName property in the viewmodel to the text in the strong element.
<strong data-bind="text: firstName">
text binding causes the associated DOM element to display the text value of your parameter.
You typically use the text binding with elements like
<em> that traditionally display text, but technically you can use it with any element.
Other bindings give you access to the element.
- visible. The
visible bindingcauses the associated DOM element to become hidden or visible according to the value you pass to the binding.
- html. The
htmlbinding causes the associated DOM element to display the HTML specified by your parameter. Typically this is useful when values in your view model are actually strings of HTML markup that you want to render.
- css. The
cssbinding adds or removes one or more named CSS classes to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative.
- style. The
stylebinding adds or removes one or more style values to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative, or to set the width of a bar to match a numerical value that changes.
- attr. The
attrbinding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the
titleattribute of an element, the
imgtag, or the
hrefof a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property changes.
Show Hide Sample
Here’s a sample showing how each visible can be used with click, disable, enable bindings:
CSS and HTML Sample
The following Knockout.js sample shows how you can use html, attr, and css bindings.
Control Flow Bindings
There are four bindings that help you with control flow. The foreach, if, ifnot, and with bindings provide ways for you to control what is displayed and how the data are displayed.
foreach Control Flow Binding
foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that markup to the corresponding array item. This is especially useful for rendering lists or tables.
The foreach binding is covered in the next post, Dynamic UI With MVVM Using ObservableArray in Knockout.js, that is tied to observableArrays.
if and notif Control Flow Bindings
if binding causes a section of markup to appear in your document (and to have its
data-bind attributes applied), only if a specified expression evaluates to
true (or a
true-ish value such as a non-
null object or nonempty string).
It is a lot like the visible binding in functionality, except that with visible the markup remains in the DOM and a CSS style applied to hide the element. The if binding adds and removes the markup in your DOM.
ifnot binding is exactly the same as the
if binding, except that it inverts the result of whatever expression you pass to it.
Here’s an example.
with Control Flow Binding
with binding creates a new binding context, so that descendant elements are bound in the context of a specified object.
The following example, displays a product, along with related data that is nested:
Binding to Control Types
The following is an example of binding view model properties to a range of HTML control types. This is from the Knockout Control types example in the Knockoutjs documentation.
Interesting parts to call out.
valueUpdate: “afterkeydown” provides the update to the viewmodel and to the observable elements after each key is pressed.
selectedOptions: multipleSelectedOptionValues provides the selected values.
and value attribute, checked bindings provide the value for the radio buttons.
You’re not limited to using the built-in bindings like
value, and so on — you can create your own ones. This is how to control how observables interact with DOM elements, and gives you a lot of flexibility to encapsulate sophisticated behaviors in an easy-to-reuse way.
For example, you can create interactive components like grids, tabsets, and so on, in the form of custom bindings.
See Creating custom bindings in the Knockout documentation.