python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions