Introduction
This chapter demonstrates about the Knockout.js Contro Flow Binding Which is the cleaner for JavaScript code and following are the concepts are covered in this chapter.
value binding
- textinput binding
- hasfocus binding
- checked binding
- options binding
- selectedoptions binding
Description
binding is known as creating binding in 2 ways i,e textbox and text area and viewModel property There slight difference text input binding and value binding i,e which makes immediate updates which are available from the various inputs and HTML DOM elements the syntax for text binding is as shown below.
[code]
textInput: <binding-value>
[/code]
The code below demonstrates the textinput binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS textInput Binding </title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p> Enter your reviews here: <br><br><textarea rows=5 data-bind="textInput: someReview" ></textarea><br></p>
<p> You entered : <span data-bind="text: someReview"/></p>
<script type="text/javascript">
function ViewModel (){
this.someReview = ko.observable('');
};
var vm = new ViewModel();
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.
Description
In hasfocus binding user can set the focus of the HTML DOM element by manually with a view model property which is a two-way binding method whenever element get the focus from the UI then automatically ViewModel property boolean value will also get changed. the syntax below demonstrates the has focus binding as shown below.
[code]
hasFocus: <binding-value>
[/code]
The code below demonstrates the hasfocus binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS hasFocus Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p>Enter primary contact number : <input data-bind="
value: primaryContact,
hasFocus: contactFlag,
style: { 'background-color': contactFlag() ? 'pink' : 'white' } " /></p>
<button data-bind="click: setFocusFlag">Set Focus</button>
<script type="text/javascript">
function ViewModel (){
this.primaryContact = ko.observable();
this.contactFlag = ko.observable(false);
this.setFocusFlag = function(){
this.contactFlag(true);
}
};
var vm = new ViewModel();
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.
Description
checked binding is used create a link between the ViewModel property and checkable form. mostly several forms have check boxes and radio buttons which is also a two-way binding in which user checks form control then respective view model property vet changed the syntax is as shown below.
[code]
checked: <binding-value>
[/code]
The code below demonstrates the checked binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Checked checkbox Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p> The required files are installed. Please check below to complete installation </p>
<p><input type="checkbox" data-bind="checked: agreeFlag" />I agree to all terms and conditions applied.</p>
<button data-bind="enable: agreeFlag">Finish</button>
<script type="text/javascript">
function ViewModel () {
this.agreeFlag= ko.observable(false) // Initially unchecked
};
var vm = new ViewModel();
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.
When user clicked the check box then only Finish button will appear as shown in below image.
Description
option binding is used to get the option for the selected element which can be used for drop-down list of multi-select list but which can not be used in select elements the syntax of option binding as shown below.
[code]
options: <binding-array>
[/code]
The code below demonstrates the checked binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Options Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p>Tutorials Library:
<select data-bind="
options: availableTutorials,
value: selectedTutorial,
optionsCaption: 'Choose tutuorial...',
"></select></p>
<p>You have selected <b><span data-bind="text:selectedTutorial"></b></span>
<script type="text/javascript">
function ViewModel (){
this.selectedTutorial = ko.observable();
this.availableTutorials = ko.observableArray(['HTML','.NET','CSS','Java Technologies','Mainframe',
'Management','Microsoft Technologies','Mobile Development','Programming','Software Quality']);
};
var vm = new ViewModel();
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.
When the user selected the tutorial from the drop down list then it shows like below image.
Key Points
- Binding is known as creating binding in 2 ways.
- Most forms have checkboxes and radio buttons.