Introduction
This chapter demonstrates about the Knockout.js Contro Flow Binding Which has the several types bindings following are the concepts are covered in this chapter.
- click Binding
- event Binding
- submit Binding
- value Binding
- enable Binding
- disable Binding
Description
The click binding is one of the simplest bindings and is utilized to invoke a Javascript function connected with a DOM element in light of a click which binding is similar to the event handler. In a click binding mostly used elements are a button, input, a but these are works with the visible DOM elements. The syntax below demonstrates the click binding as shown below.
[code]
click: <binding-function>
[/code]
The code below demonstrates the click binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Click Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p>Enter your name: <input data-bind="value: someValue" /></p>
<p><button data-bind="click: showMessage">Click here</button></p>
<script type="text/javascript">
function ViewModel (){
this.someValue = ko.observable();
this.showMessage = function(){
alert("Hello "+ this.someValue()+ "!!! Welcome to SPlessons"+ "\nClick Binding is used here !!!");
}
};
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.
Whenever user enter a name it will display a dialogue box as shown in below image.
Description
event bind is used to listen to specific DOM event and which can call the associative handler function the syntax below demonstrates the event binding as shown below.
[code]
event: <{DOM-event: handler-function}>
[/code]
The code below demonstrates the event binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Event Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p>Enter Number :</p>
<input data-bind="value: someValue , event: {keyup: showMessage}, valueUpdate: 'afterkeydown' " /><br><br>
You Entered: <span data-bind="text: someValue"/>
<script type="text/javascript">
function ViewModel (){
this.someValue = ko.observable();
this.showMessage = function(data,event){
if ((event.keyCode < 47) || (event.keyCode > 58 )) { //check for number
if (event.keyCode !== 8) //ignore backspace
alert("Please enter a number.");
this.someValue('');
}
}
};
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
event binding is widely used by form elements which binding is used to submit the JavaScript function when the DOM element is submitted in which form is not directly submitted to the server. These default function is stopped browser action if a user needs to get submitted the submit function then just return the true from handler function. The syntax of the submit binding as shown below.
[code]
submit: <binding-function>
[/code]
The code below demonstrates the submit binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Submit Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<form data-bind="submit: multiplication">
<p>Enter first number: <input data-bind="value: var1" /></p>
<p>Enter second number: <input data-bind="value: var2" /></p>
<p><button type="submit" >Click here for multiplication</button></p>
</form>
<script type="text/javascript">
function ViewModel (){
self = this;
self.var1 = ko.observable(20);
self.var2 = ko.observable(30);
self.var3 = ko.observable(0);
this.multiplication = function(){
self.var1(Number(self.var1()));
self.var2(Number(self.var2()));
this.var3 = self.var1() * self.var2();
alert("multiplication is = "+ this.var3 );
};
};
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.
Whenever user clicked on click here for multiplication then it will show the result as shown in below image.
Description
Which binding is utilized to connect separate DOM element's value into ViewModel property. For the most part, which is utilized with an element like input, select and text area and same as text binding, the difference is that in value binding, data can be changed by the client and the ViewModel will upgrade it automatically. The syntax below demonstrates the value binding as shown below.
[code]
value: <binding-value>
[/code]
The code below demonstrates the submit binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Value Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p>Enter your name: <input data-bind="value: yourName, valueUpdate: 'afterkeydown'" /></p>
<p>Your name is : <span data-bind="text: yourName" /></span>
<script type="text/javascript">
function ViewModel (){
this.yourName = 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
The enable binding is used enable bind to the certain DOM elements based on some specified conditions which are useful to some elements such as text area, select, input. The syntax of enables binding as shown below.
[code]
enable: <binding-value>
[/code]
The code below demonstrates the submit binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Enable Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p> Enter your feedback here:<br><br>
<textarea rows=5 data-bind="value: hasFeedback, valueUpdate: 'afterkeydown'" ></textarea></p>
<p><button data-bind="enable: hasFeedback">Save Feedback</button></p>
<script type="text/javascript">
function ViewModel (){
hasFeedback = 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
disable binding just reverse to the enable binding which disables the bind to the associated DOM elements when the parameter is true the syntax of the disable binding as shown below.
[code]
disable: <binding-value>
[/code]
The code below demonstrates the submit binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Disable Binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<p> Enter your feedback here:<br><br>
<textarea rows=5 data-bind="value: hasFeedback, valueUpdate: 'afterkeydown'" ></textarea></p>
<p><button data-bind="disable: !(hasFeedback())">Save Feedback</button></p>
<script type="text/javascript">
function ViewModel (){
hasFeedback = 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.
In the above image, Save Feedback was hidden whenever user entered feedback then only it will visible as shown in below image.
Key Points
- click binding is one of the simplest binding.
- disable binding just reverse to the enable binding.