css binding in Knockout js

css binding in Knockout js

In this article, I’m going to explain css binding for observable collection using knockout js and have a requirement for show/ hide div using css binding.

Table of Contents

  1. Code sample for data-bind in view.
  2. Code sample for ViewModel.
In the 1st step:  Writing the code for “View

<div data-bind="style: {display: showHideDiv() ? 'block' : 'none' }">  
   <!— Need to display your view want to show or hide -->                                 
</div>


In the 2nd step:  Writing the code for “View model

<script type="text/javascript">
function myViewModel() {
    this.showHideDiv = ko.observable(true);
 }
ko.applyBindings(new myViewModel());
</script>


In the above, the myViewModel(){} have  showHideDiv() observable is true that means the div is display by default otherwise hide.

If you need to hide to div, that time we can write to( this.showHideDiv = ko.observable(false)) i.e.


<script type="text/javascript">
function myViewModel() {
    this.showHideDiv = ko.observable(false);
 }
ko.applyBindings(new myViewModel());

</script>


ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.