javascript - Knockout js隐藏图片div

Question

我有 Div 绑定(bind)图像标签，它工作正常，但是当图像值为 null 时。

我想隐藏整个 div，但是当图像值为 null 时，我得到空白的白色边框框，我也需要删除它。如何使用 knockout js

存档

<ul  id="user-listview" data-bind="foreach:dataItems">
   <li>
       <div>
         <span data-bind="text:UserID"  ></span>
          <span data-bind="text:UserName" ></span>
           <span data-bind="text:mobilenumber"></span>
         </div>
      <div id="divuserImage">
         <span data-bind="text:ImageID" style="display:none"></span>
         <img style="height: 200px;width: 300px;margin-top: 10px;" data-bind="attr: { src:userImageUrl }" />
     </div>
  </li>
</ul>

function UserModel(data){
    self=this;
    self.UserID=ko.observable(data.UserID)
    self.UserName=ko.observable(data.UserName)
    self.mobilenumber=ko.observable(data.mobilenumber)
    self.userImageUrl=ko.observable(data.userimage)
    self.ImageID=ko.observable(data.ImageID)
}

Answer 1

试试这个，如果你还没有的话

<ul  id="user-listview" data-bind="foreach:dataItems">
    <li>
        <div>
            <span data-bind="text:UserID"  ></span>
            <span data-bind="text:UserName" ></span>
            <span data-bind="text:mobilenumber"></span>
        </div>
        <div id="divuserImage" data-bind="visible: userImageUrl() && userImageUrl() != ' '">
            <span data-bind="text:ImageID" style="display:none"></span>
            <img style="height: 200px;width: 300px;margin-top: 10px;" data-bind="attr: { src:userImageUrl }" />
        </div>
    </li>
</ul>

我只在 div 标签中添加了 data-bind="visible: userImageUrl()"

在您的 js 模型中，您还需要一个 self.ImageID 属性(或者如果您以其他方式将它添加到 dataItems 中的每个元素)。例如:

function UserModel(data){
    self=this;
    self.UserID=ko.observable(data.UserID)
    self.UserName=ko.observable(data.UserName)
    self.mobilenumber=ko.observable(data.mobilenumber)
    self.userImageUrl=ko.observable(data.userimage)
    self.ImageID=ko.observable(data.ImageID)
}