Bindings in Knockout Part 1

Rama Sagar
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 6385 red flag

Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates.For more info


This article shows the walk through of different bindings used in Knockout.js

In this context, we will see the overview of how to control the appearance & style of the controls using Knockout.JS Bindings.
  1. visible binding
  2. text binding
  3. HTML binding
  4. CSS binding
  5. style binding
  6. attr binding  
 Let us know each one in detail

Please check my previous article How to use Knockoutjs in mvc5

Visible binding

The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.
<div data-bind="visible: showinfo">
    Show Information
</div> <script type="text/javascript"> var viewModel = { showinfo: ko.observable(true) // Message initially visible
}; viewModel.showinfo(false); // now it's hidden
viewModel.showinfo(true); // now it's visible again

The Text Binding

The text binding causes the associated element to display the text value of the parameter.

Typically this is useful with elements like <span> or <em> that traditionally display text, but technically you can use it with any element.

 <span data-bind="text: myText"></span>
<script type="text/javascript">
    var viewModel = {
        myText: ko.observable() // Initially blank
}; viewModel.myText("Hello, world!"); // Text appears

The Html Binding

The html binding causes the associated DOM element to display the HTML specified by your parameter.

Typically this is useful when values in your view model are actually strings of HTML markup that you want to render.
<div data-bind="html: details"></div>
<script type="text/javascript">
    var viewModel = {
        details: ko.observable() // Initially blank
    viewModel.details("<em>For further information, view the report <a href='index.html'>here</a>.</em>"); // HTML content appears 

The CSS Binding

The css binding adds or removes one or more named CSS classes to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative.

.green{ background: yellow; }

.red { background: red; }

Html Markup:

<b>Sample CSS binding</b>

<p> Enter integer: <input data-bind="value: integer, valueUpdate: 'keyup', css: integer() >= 0 ? 'yellow;' : 'red'" /> </p>

The Style Binding

The style binding adds or removes one or more style values to the associated  element. This is useful, for example, to highlight some value in red if it becomes negative, or to set the width of a bar to match a numerical value that changes.

<b>Sample style binding</b>
<p> Enter number: <input data-bind="value: integerStyle, valueUpdate: 'keyup', 
                                     style: { background: integerStyle() >= 0 ? 'yellow' : 'red' }" />

The attr Binding

The attr binding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the title attribute of an element, the src of an img tag, or the href of a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property changes

<div data-bind="attr: { data-something: someValue }">...</div>


In this article we have learned how to use Bindings in knockout


Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)