- 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 - HTML Binding
HTML binding causes the associated DOM element to display the HTML specified by the parameter. This is very useful if you want to generate HTML markup dynamically.
Syntax
html: <binding-value>
Parameters
KnockoutJS sets DOM element's content to the parameter value provided. This functionality is also available in JQuery. If JQuery is not available, then KO is used to achieve this.
If the parameter is observable, then elements value is updated as and when the underlying observable is changed. Element is processed only once, if no observable is used.
Example
Let us take a look ath the following example which demonstrates the use of html binding.
<!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 TutorialsPoint !!! For free online tutorials and courses click <a href = 'https://tutorialspoint.com/'>here</a>.</strong>"); } ko.applyBindings(new AppViewModel()); </script> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in html-bind.htm file.
Open this HTML file in a browser.
knockoutjs_declarative_bindings.htm
Advertisements
To Continue Learning Please Login
Login with Google