Question

我有Div binding图像标记，它正在工作，但是当图像值为空时。

我想要隐藏整个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)
}

Answer 2

您可以使用CSS执行此操作。如果在src中没有任何内容，如果为null，则只需使用：

#divuserImage img[src=""] {
    display: none;
}

Knockout js隐藏图像div

2 个答案: