ノックアウトjs非表示画像div

Question

イメージタグがDiv bindingイメージタグを持っていますが、動作していますが、イメージ値がnullの場合。

私は全体のdivを隠したいのですが、画像の値がnullのとき、私は空白の境界ボックスを取得、私はあなたが行うためにCSSを使用することができます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タグの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

を使用して、これをアーカイブすることalso.howを削除する必要がありますこの。あなたは、単に使用することができますnullの場合はSRCには何もありイマイチ場合提供：

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