jquery - 在列表视图中隐藏特定的 html

Question

我有一个动态创建的列表视图，显示位置列表以及这些位置的距离。对于这些位置之一（WFH），我<span data-bind="text: distanceBetweenPoints"></span><span>&nbsp; mi.</span>根本不希望这条线出现。那么我该如何更改它，以便如果 locationName == 'WFH' 从 next 中没有出现任何内容span。

这是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"));
    })
}

Answer 1

这应该有效：

<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 网站上找到：如果绑定，可见绑定

Answer 2

在不改变 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>