在列表视图中隐藏特定的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

回答

相关问题