Introduction
This chapter demonstrates about the Knockout.js Text and Appearance Binding Which have the several types bindings following are the concepts are covered in this chapter.
- Visible Binding
- Text Binding
- HTML Binding
- CSS Binding
Description
Visual Binding is associated with the DOM elements to be visible or hidden which are based the values passed in binding The snippet below demonstrates the syntax of the visual bindings as shown below.
[code]
visible: <binding-condition>
[/code]
Following are some parameters of Visual Bindings which are briefly explained below.
The code below demonstrates the Visible binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Visible Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<div data-bind="visible: showMe">
showMe function set to true thenonly line visible.
</div>
<script>
function AppViewModel() {
this.showMe = ko.observable(false); // hidden initially
}
var vm = new AppViewModel();
ko.applyBindings(vm); // shown now
vm.showMe(true);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- At the point when the parameter changes into a false-like value like boolean false, or 0, or invalid, or vague then binding set to display: none for the yourElement.style.display making it has hidden. Which is given more need over any current styles in CSS?
- At the point when the parameter changes into true-like value, for example, boolean true, or non-null or array, the binding evacuates the yourElement.style.display value then makes it as visible.
- If this is an Observable whenever the time property changes then binding automatically update or else just set the visibility.
Description
Inorder to display the text value of parameter text binding contain associated DOM element. Which is used for the text level DOM elements like <span> or <em>. text bind accepts all data types and rendering it after parsing into the strings. The syntax below demonstrates the Text bindings as shown below.
[code]
text: <binding-value>
[/code]
Following are some parameters of Text Bindings which are briefly explained below.
The code below demonstrates theText binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS text binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p data-bind="text: hiThere"></p>
<script>
function AppViewModel() {
this.hiThere = ko.observable("Hi SPlessons !!!");
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- By using the Knockout.js previous content will be overridden and which can set the element content to the text content with parameter values.
- Element value gets updated whenever the underlying property get changes if the parameter is an Observable or else values will be assigned only for the first time.
- In the event that something besides Number or String is passed then KO parses it into a String position comparable to yourParameter.to.
- The value of the parameter should be a JavaScript or arbitrary JavaScript expression which returns a text value.
Description
On the off chance that something besides Number or String is passed then KO parses it into a String organization The HTML binding causes the related DOM elements to show the HTML determined the parameter. which is exceptionally helpful in the event that user needs to produce HTML markup progressively the syntax as shown below.
[code]
html: <binding-value>
[/code]
The code below demonstrates the HTML Binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Html binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p><span data-bind="html: welcomeMessgae "></span></p>
<script>
function AppViewModel() {
this.welcomeMessgae = ko.observable();
this.welcomeMessgae ("<strong>Welcome to slessons !!!for best online tutorials and courses click <a href='http://splessons.com/'>here</a>.</strong>");
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
The bindings permits user to characterize CSS classes for the HTML DOM components in light of certain condition. Which is helpful on the off chance that where you have to highlight a few information relying upon circumstance the syntax as shown below.
[code]
css: <binding-object>
[/code]
The code below demonstrates the CSS Binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS CSS binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
<style>
.outOfStock {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div data-bind="css: { outOfStock : productStock() === 0 }">
Product Details.
</div>
<script>
function AppViewModel() {
this.productStock = ko.observable(0);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Visual Binding is associated with the DOM elements.
- Multiple CSS calsses can also apply at once.