0

場所のリストとそれらの場所の距離を表示する動的に作成されたリスト ビューがあります。これらの場所の 1 つ (WFH) では、行<span data-bind="text: distanceBetweenPoints"></span><span>&nbsp; mi.</span>をまったく表示したくありません。では、locationName == 'WFH' の場合、次から何も表示されないようにするにはどうすればよいでしょうか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"));
    })
}
4

2 に答える 2

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 サイトを参照してください: If binding , Visible binding

于 2012-12-18T18:31:40.373 に答える
0

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-18T18:32:21.960 に答える