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 😛
Age: ko.observable(80), //If your are above 80 then css should be RED 😛
StyleBinding: ko.observable('Blue'), // We can set the style too
AttrBindingUrl: ko.observable('http://ift.tt/PeEruY'), //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.


via Blogger http://ift.tt/1fVwMXg March 09, 2014 at 08:56AM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s