使用Knockout.js在列表中更改div的类

Question

I am binding list of data few of which have image. I need to change the classes of div if the image value is NULL.

When image value is NULL, I need to change div classes Like, Delete,listcheckbox to ILike, Idelete, Ilistcheckbox or vice-versa.

How can I do it?

  <div data-role=view id="userProfile">
   <ul class="oneClass"  data-role="listview" id="Feeds-listview" data-bind="foreach:data">
   <li style="background-color:#FFF;white-space:normal">
  <div style="width:100%">
        <div data-bind="visible:ImageUrl">
     <img style="height: 200px;width: 300px;margin-top: 10px;" data-bind="attr: { src:ImageUrl }" />
    </div>

     <div data-bind="click:$root.Like" class="Like" >
 <div data-bind="click:$root.delete" class="delete"> </div> 
  <input type="checkbox" class="listcheckbox "/>
  </div>


    </li>
    </ul>
    <div>

 <style>
  .Like{
   }
  .delete{
   }
  .listcheckbox{
   }
  .ILike{
    }
  .Idelete{
  }
 .Ilistcheckbox{
   }

  </style>

Answer 1

You can make use of either css or style bindings. The css binding adds or removes one or more named CSS classes to the associated DOM element based on an expression. So, you can check if the expression for the ImageUrl is truthy or falsy and then apply the css accordingly.

Change code from

<div data-bind="click:$root.Like" class="Like" >
 <div data-bind="click:$root.delete" class="delete"> </div> 

To

<div data-bind="click:$root.Like, css: { Like: ImageUrl }" >
 <div data-bind="click:$root.delete, css: { delete: ImageUrl }"> </div> 

Working Code sample

  var viewModel = { ImageUrl : null, ImageUrlNotEmpty : "value" }; ko.applyBindings(viewModel); 

 .Like{ background-color: yellow; } .delete{ background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div data-bind="css: { Like: ImageUrl }" >ImageUrl is empty Div 1</div> <div data-bind="css: { delete: ImageUrl }">ImageUrl is empty Div 2</div> <div data-bind="css: { Like: ImageUrlNotEmpty }" >ImageUrl is NOT empty Div 3</div> <div data-bind="css: { delete: ImageUrlNotEmpty }">ImageUrl is NOT empty Div 4</div>