Bindings in Knockout Part 1

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

Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates.For more info http://en.wikipedia.org/wiki/KnockoutJS

Introduction

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
</script>


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
</script>

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 
</script>

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' }" />
</p>

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>

Conclusion

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

Reference

http://knockoutjs.com/documentation/attr-binding.html

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
ramasagar
http://www.ramasagar.com
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)