In this article series, we will discuss the bindings available in KnockoutJS. In Part I, we will see the overview of how to control the appearance & style of the controls using KnockoutJS Bindings.
To control the appearance and style of a control, KnockoutJS provides half a dozen binding handlers as in the following:
- visible binding
- text binding
- HTML binding
- CSS binding
- style binding
- attr binding
Let us overview each of the bindings.
The visible binding
The visible binding makes the binding element visible or hidden in the page. KnockoutJS changes the value of an element. Style.displays attributes based on the value supplied to the binding. The visible binding accepts the values like the boolean value false/true, or the numeric value 0, or null, or undefined.
<b>visible binding</b>
<p>
Enter your name: <input type="text" data-bind="value: name, valueUpdate: 'keyup'" />
<p data-bind="visible: name().length > 0">Hello <span data-bind="text: name"></span></p>
</p>
In the preceding HTML, we have a TextBox. When you start typing into the TextBox, we are making the Hello label visible using the visible binding. As shown in this example above, we are assigning the expression to the visible binding.
The text binding
The text binding displays the value supplied to it. KnockoutJS sets the supplied value to the innerText attribute of the associated element. The text binding accepts the numeric, string, observable & object. If the supplied value is other than observable then numeric & string, KnockoutJS converts it to value.toString and displays it.
<b>text binding</b>
<p>Hey <span data-bind="text: name"></span></p>
</p>
In the preceding example, Knockout displays the value from the name observable. Note: if you supply HTML markups as input then the text binding will display the HTML text as it is. It won't render the HTML text.
The HTML binding
The HTML binding renders the HTML markups as it is. The KnockoutJS sets the HTML markups to the elements innerHTML attribute. The following code displays the name with the "h1" text.
<b>HTML binding</b>
<p>Hi <span data-bind="html: nameHTML"></span></p>
The viewmodel for the preceding view is as given below.
nameHTML = ko.observable("<h1> Jagan </h1>");
The CSS binding
The CSS binding applies or removes the CSS classes to/from the associated element. For example, if you want to highlight the TextBox with the green color when the user entered the positive integer & highlight it in the red color when the input is negative.
CSS classes used:
.green{ background: green; }
.red { background: red; }
Html Markup:
<b>CSS binding</b>
<p> Enter integer: <input data-bind="value: integer, valueUpdate: 'keyup', css: integer() >= 0 ? 'green' : 'red'" /> </p>
In the preceding markup, KnockoutJS will add the red class when the user types negative values into the TextBox, green class for positive values. The values for CSS can be:
css: integer
css: { red: integer() < 0 }
css: { red: integer() < 0, 'green-highlight': isInteger }
|
The style binding
The style binding sets the style attributes of the associates. We can use the same CSS binding example without CSS claases for style binding.
<b>style binding</b>
<p> Enter integer: <input data-bind="value: integerStyle, valueUpdate: 'keyup',
style: { background: integerStyle() >= 0 ? 'green' : 'red' }" />
</p>
In the preceding example, we are setting the background of the associated element based on the expression.
The attr binding
The attr binding sets the associated elements attribute value. For example, if you want to set the title, href, id, ..... values of an element then a good way is to use an attr binding.
<b>attr binding</b>
<p><span data-bind="attr: { title: 'Hello ' + name() }">Hover here</span> </p>
As mentioned in the preceding example, if you hover on the "Hover here" text then the input from the name text box's value will be displayed as a title since we are using an attr binding for the title attribute.
Soooo, we had a quick overview on the bindings for controlling the appearance & style.
Result:
Reference: KnockoutJS