Question

我有以下代码，在成功的AJAX返回时，会显示一个带有地址列表的弹出窗口。淘汰赛版本是2.3.0。

如果有超过1个地址，那么html会使用'display'字符串正确呈现。

问题是，如果只有1个地址，则html列表呈现但跨度中没有任何文本。

在这两种情况下，视图模型都正确地填充了数据，所以它看起来像是更新html的问题。

我已经尝试过再次推送数据，虽然我可以使用jQuery来更新html，但这并没有帮助我理解这个问题。

HTML

    <div id="reverseGeocodingResults">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Local Addresses</h4>
            </div>
            <div>
                <ul data-bind="foreach: vm.reverseGeocodingViewModel.AddressList" class="locationList">
                    <li class="locationListItem" data-bind="click: SubmitAddressRequest">
                        <div>
                            <span data-bind="text: Display"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Javascript（来自一个单独的文件，所以只采取我认为相关的）

    var vm;
    var masterViewModel = function () {
        this.viewModel = { LocationList: ko.observableArray([]), SubQuery: ko.observable() };
        this.reverseGeocodingViewModel = { AddressList: ko.observableArray([]) };
    };

    function SubmitReverseGeocodingRequest(easting, northing, projectId, mouseLocation) {
        $.post('url?action=ReverseGeocodingLookup', {
            easting: easting,
            northing: northing,
            pid: projectId
        })
        .done(function (data) {
            spinner.stop();
            if (parseInt(data.NumberOfAddressesFound) > 0) {
                if (data.AddressList.length == 1) {
                    alert('just 1 address');
                }

                // remove all array items before adding new
                // Not pretty but gets around an issue the UI seems to have displaying the updated list
                if (vm.reverseGeocodingViewModel.AddressList().length > 0) {
                    vm.reverseGeocodingViewModel.AddressList.splice(0, vm.reverseGeocodingViewModel.AddressList().length);
                }

                vm.reverseGeocodingViewModel.AddressList(data.AddressList);
            }
        });
    )

    $(document).ready(function () {
        vm = new masterViewModel();
        ko.applyBindings(vm);
    })

HTML结果 - 多个结果

    <ul class="locationList" data-bind="foreach: vm.reverseGeocodingViewModel.AddressList" style="height: 265px;">
        <li data-bind="click: SubmitAddressRequest" class="locationListItem">
            <div>
                <span data-bind="text: Display">Yates Wine Lodge, SWINDON</span>
            </div>
        </li>                        
        <li data-bind="click: SubmitAddressRequest" class="locationListItem">
            <div>
                <span data-bind="text: Display">The Brunel Centre, SWINDON</span>
            </div>
        </li>
    </ul>

HTML结果 - 单个结果

    <ul class="locationList" data-bind="foreach: vm.reverseGeocodingViewModel.AddressList" style="height: 265px;">
        <li class="locationListItem" data-bind="click: SubmitAddressRequest">
            <div>
                <span data-bind="text: Display"></span>
            </div>
        </li>
    </ul>

我已经查看了之前关于这个主题的各种问题，因此无法提出答案，但如果我错过了一个问题，请指出我的另一篇文章。

Answer 1

在添加新用户reverseGeocodingViewModel.AddressList.removeAll()
也许没有找到它，但你必须解析数据，$.parseJSON我用它。
尝试使用

$.each($.parsejSON(data), function(i, el){ reverseGeocodingViewModel.AddressList.push(el); })

我希望它能帮到你

Answer 2

我注意到以下问题：

函数SubmitReverseGeocodingRequest应使用}而不是)
foreach: vm.reverseGeocodingViewModel.AddressList应为foreach: reverseGeocodingViewModel.AddressList，不vm，因为vm已绑定

vm = new masterViewModel(); ko.applyBindings(vm);
要清除AddressList使用vm.reverseGeocodingViewModel.AddressList([])代替vm.reverseGeocodingViewModel.AddressList.splice(0, vm.reverseGeocodingViewModel.AddressList().length);

注意：这可能是错误

<li class="locationListItem" data-bind="click: SubmitAddressRequest">

所以AddressList项必须具有SubmitAddressRequest功能。我不认为您使用函数

获取数据

我已根据您的代码创建了测试示例，请查看here

KnockoutJS - foreach不使用viewmodel中的单个条目

2 个答案: