javascript - KnockoutJS - foreach 不适用于 View 模型中的单个条目

Question

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

如果地址超过 1 个，则 html 会使用“display”字符串正确呈现。

问题是，如果只有 1 个地址，则 html 列表会呈现，但范围内没有任何文本。

在这两种情况下， View 模型都正确填充了数据，因此在我看来，更新 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

1. 在添加新内容之前删除所有内容 reverseGeocodingViewModel.AddressList.removeAll()
2. 也许没有找到它，但你必须解析数据，我用的是$.parseJSON。

3. 尝试使用

   $.each($.parsejSON(数据), 函数(i, el){
verseGeocodingViewModel.AddressList.push(el);
})

希望对你有帮助