在列表視圖中隱藏特定的html

我有一個動態創建的列表視圖，顯示位置列表以及這些位置有多遠。對於其中一個位置（WFH），我不希望線路<span data-bind="text: distanceBetweenPoints"></span><span>  mi.</span>出現。所以我怎樣才能改變這個，如果locationName =='WFH'沒有出現在下一個span。在列表視圖中隱藏特定的html

下面是HTML：

<div data-role="content"> 
    <ul id="nearbyLocationsListView" data-bind="template: {name: 'locationsListTemplate', foreach: nearbyLocations}" data-role="listview" data-filter="false"></ul>   
    <script id="locationsListTemplate" type="text/html"> 
     <li> 
      <div>  
       <span data-bind="text: locationName"></span> 
       <span data-bind="text: distanceBetweenPoints"></span><span>&nbsp; mi.</span> 
      </div> 
     </li> 
    </script> 
</div>

這裏是正在創建的列表：

function GetClosestLocationByCoordinates() { 
    var url = 'http://localhost/GetClosestLocationByCoordinates; 

    var jqxhr = 
    $.getJSON(url, 
    function (data) { 
     $.each(data.GetClosestLocationByCoordinatesResult, function (key, val) { 
      var distanceBetweenPoints = distance(); 
      nearbyLocationsModel.addNearByLocations(val.LocationId, val.LocationName, val.NumberCheckedIn, distanceBetweenPoints); 
     }); 
     ko.applyBindings(nearbyLocationsModel, document.getElementById("nearbyLocationsListView")); 
    }) 
}

來源

2012-12-18 Mike

無論是邁克爾的回答還是我會工作。不同的是，邁克爾會設置他添加的div來顯示：沒有，而我的實際上將跨度從HTML中移除。 – Grinn

這應該工作：

<div data-role="content"> 
    <ul id="nearbyLocationsListView" data-bind="template: {name: 'locationsListTemplate', foreach: nearbyLocations}" data-role="listview" data-filter="false"></ul>   
    <script id="locationsListTemplate" type="text/html"> 
     <li> 
      <div>  
       <span data-bind="text: locationName"></span> 
       <div data-bind="visible: locationName() !== 'WFH'"> 
        <span data-bind="text: distanceBetweenPoints"></span><span>&nbsp; mi.</span> 
       </div> 
      </div> 
     </li> 
    </script> 
</div>

您也可以使用If結合而不是visible。請注意，If從頁面中刪除元素，而visible只是隱藏它。

更多細節可以在KO網站上找到：If binding，Visible binding

來源

2012-12-18 18:31:40 MichaelS

這似乎很簡單，我查看了文檔，但它似乎並沒有工作 – Mike

@Mike：嘗試添加'（）'到locationName，我已經更新了我的答案。由於您正在比較字符串，您需要可觀察值而不是可觀察值本身。 – MichaelS

工作！謝謝！ – Mike

這樣做沒有你的DOM結構被改變：

<div data-role="content"> 
    <ul id="nearbyLocationsListView" data-bind="template: {name: 'locationsListTemplate', foreach: nearbyLocations}" data-role="listview" data-filter="false"></ul>   
    <script id="locationsListTemplate" type="text/html"> 
     <li> 
      <div>  
       <span data-bind="text: locationName"></span> 
       <!-- ko if: locationName !== 'WFH' --> 
        <span data-bind="text: distanceBetweenPoints"></span><span>&nbsp; mi.</span> 
       <!-- /ko --> 
      </div> 
     </li> 
    </script> 
</div>

來源

2012-12-18 18:32:21 Grinn

在列表視圖中隱藏特定的html

回答

相關問題