Knockout Built In Bindings- Part 1

Knockout Built In Bindings- Part 1

  19:26    Unknown

---

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) {
            TextandpApperanceModel.ShowItOrHideIt(true);
            
        } else {
            TextandpApperanceModel.ShowItOrHideIt(false);
        }
        $(this).data("clicks", !clicks);
    });
    ko.applyBindings(TextandpApperanceModel, document.getElementById('BindingTextAndApperanceSection'));

    //#endregion

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 : 

HTML :

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

ViewModel:

 //#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'))
    //#endregion

• ifnot binding: just opposite of if .
• Foreach Binding : To iterate any collection we can use foreach Binding. 

HTML :

<ul data-bind="foreach: ForeachBinding">
                                     <li data-bind="text: Name"></li>
</ul>

Output:

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

Tips: KO provides comment based syntax too for control flow.

 
<ol>
 <!-- ko foreach :ForeachBinding -->
<li data-bind="text: Name"></li>
<!-- /ko --> 
</ol>

• With Binding: With binding creates a new context of binding , so all the descendent elements will bind to that specific object.

HTML:

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

ViewModel:

<script type="text/javascript">
    ko.applyBindings({
        city: "London",
        coords: {
            latitude:  51.5001524,
            longitude: -0.1262362
        }
    });
</script>

All the code you can download from my GITHUB repository.