Question

I have a dynamically created list view that shows a list of locations and how far away these locations are. For one of these locations (WFH), I dont want the line <span data-bind="text: distanceBetweenPoints"></span><span>&nbsp; mi.</span> to appear at all. So how can I change this so that if locationName == ‘WFH’ nothing appears from the next span.

Here is the 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>

Here is where the list is being created:

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

This should work:

<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>

You can also use the If binding instead of visible.
Note that If removes the element from the page while visible simply hides it.

More details can be found on KO site: If binding, Visible binding