- KnockoutJS Tutorial
- KnockoutJS - Home
- KnockoutJS - Overview
- KnockoutJS - Environment Setup
- KnockoutJS - Application
- KnockoutJS - MVVM Framework
- KnockoutJS - Observables
- Computed Observables
- KnockoutJS - Declarative Bindings
- KnockoutJS - Dependency Tracking
- KnockoutJS - Templating
- KnockoutJS - Components
- KnockoutJS Resources
- KnockoutJS - Quick Guide
- KnockoutJS - Resources
- KnockoutJS - Discussion
KnockoutJS - Enable Binding
This binding is used to enable certain DOM element based on specified condition. This is useful with form elements such as input, select, and textarea.
Syntax
enable: <binding-value>
Parameters
Parameter consists of Boolean like value which decides whether the element should be enabled or not. Element is enabled, if the parameter is true or true like value.
Non-Boolean values are considered as loosely Boolean values. Meaning 0 and null are considered as false-like value, and Integer and non null objects are considered as true-like value.
If the condition in the parameter contains any observable value, then the condition is re-evaluated whenever observable value changes. Correspondingly, related markup will be enabled based on the condition result.
Example
Let us take a look at the following example which demonstrates the use of enable binding.
<!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>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in enable-bind.htm file.
Open this HTML file in a browser.
The save button is enabled only when the user has entered a feedback.
Using random expressions to implement enable binding
You can also use a random expression to decide whether the element should be enabled or not.
Example
Let us take a look at the following example which demonstrates the use of random expression to invoke enable binding.
<!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>Below button will be enabled only when product stock is available.</p> <button data-bind = "enable: productStock() > 0 "> Product Details </button> <script type = "text/javascript"> function AppViewModel() { this.productStock = ko.observable(-10); }; var vm = new AppViewModel(); ko.applyBindings(vm); </script> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in enable-random-bind.htm file.
Open this HTML file in a browser.
The Product Details button is enabled only when the product stock is available.
To Continue Learning Please Login
Login with Google