If at first you don't succeed, call it version 1.0

Contact Me

Sarvesh Kushwaha
Email : sarveshkushwaha@outlook.com

Total Pageviews

Powered by Blogger.

Google+ Followers

Saturday, 8 March 2014

Knockout Built In Bindings- Part 1

Knockout providing Some built in bindings which update UI automatically and finally it keeps a clean layout with no dependency on ID and CSS class.
We can categorize Knockout Built in bindings into four types:

  1. Text and Appearance
  2. Control flow
  3. Forms 
  4. Templates

1. Text and Appearance : 

For controlling Text and Appearance Knockout providing above mentioned Built in bindings .i think their names depicting what they are meant for .So instead of describing them and i will tell , how to use them :

HTML to use above KO built in bindings will be like :

To set Properties in ViewModel Code will be :
 //#region Built In Bindings Type: Text and Apperance

    var TextandpApperanceModel = {
        ShowItOrHideIt: ko.observable(true), //its for visible Binding , true makes assoicated DOM element intially visible.
        TextBinding: ko.observable("Show this line at associalted DOM element"),
        HtmlBinding: ko.observable("Make It Bold"),  //Take care of HTMl Encoding ,otherwise I will hack you :P 
        Age: ko.observable(80),   //If your are above 80 then css should be RED  :P 
        StyleBinding: ko.observable('Blue'), // We can set the style too 
        AttrBindingUrl: ko.observable('http://sarveshkushwaha.blogspot.com'), //setting the attribute href and target of an anchor 
        AttrBindingTarget: ko.observable('_blank'),

    TextandpApperanceModel.CssBinding = ko.computed(function () {
        return this.Age() > 75 ? "alert alert-danger" : "alert alert-success";

    }, TextandpApperanceModel);
    $('#ShowMeOrHideMe').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
        } else {
        $(this).data("clicks", !clicks);
    ko.applyBindings(TextandpApperanceModel, document.getElementById('BindingTextAndApperanceSection'));


I dont think i should do extra effort to describe all above code , its easy to understand and i have described lill bit as their comments .

2. Control Flow : 

  • if binding : it almost like visible binding , visible binding applies css to associated DOM element to hide and show and where If binding physically adds or remove the associated DOM element in your DOM.
         Example Case : lets suppose we want to show some text on CheckBox checked.and hide text o       uncheck of the same textbox. How easily we can do this using if Binding : 

<label><input type="checkbox" data-bind="checked: displayMessage" /> Control flow Binding Using IF (checkbox check then show) :Display  message</label>
                          <div data-bind="if: displayMessage"> Here is my message.</div>


 //#region Control flow
    var arrayForech = [{ Name: "sarvesh" }, { Name: "isha" }, { Name: "akshay" }, { Name: "nitish" }];
    var ControlFlowBindingModel = {
        displayMessage: ko.observable(false),
        ForeachBinding : ko.observable(arrayForech)


    ko.applyBindings(ControlFlowBindingModel, document.getElementById('ControlFlowBinding'))

  • ifnot binding: just opposite of if .
  • Foreach Binding : To iterate any collection we can use foreach Binding. 
<ul data-bind="foreach: ForeachBinding">
                                     <li data-bind="text: Name"></li>
<ul data-bind="foreach: ForeachBinding">
                                     <li data-bind="text: Name">sarvesh</li>
                                     <li data-bind="text: Name">isha</li>
                                     <li data-bind="text: Name">akshay</li>
                                     <li data-bind="text: Name">nitish</li>

Tips: KO provides comment based syntax too for control flow.
 <!-- ko foreach :ForeachBinding -->
<li data-bind="text: Name"></li>
<!-- /ko --> 

  • With Binding: With binding creates a new context of binding , so all the descendent elements will bind to that specific object.
<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
<script type="text/javascript">
        city: "London",
        coords: {
            latitude:  51.5001524,
            longitude: -0.1262362

All the code you can download from my GITHUB repository.



Post a Comment