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

Question

我正在绑定(bind)数据列表，其中很少有图像。如果图像值为 NULL，我需要更改 div 的类。

当图像值为 NULL 时，我需要将 div 类 Like、Delete、listcheckbox 更改为 ILike、Idelete、Ilistcheckbox，反之亦然。

我该怎么做？

  <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

您可以使用 css 或 style 绑定(bind)。 css 绑定(bind)根据表达式向关联的 DOM 元素添加或删除一个或多个命名的 CSS 类。因此，您可以检查 ImageUrl 的表达式是 truthy 还是 falsy，然后相应地应用 css。

更改代码自

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

给

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

工作代码示例

 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>