Question

我有一个动态创建的下拉列表，当它第一次被创建时，它有9个具有不同属性的对象。当你点击一个选项时，它会熄灭并获取更多信息，在这种情况下会获得3个新对象。但是当它更新时，它就是这样的：

到此：

对象已更新，当控制台记录时，它们看起来都很好。但是，它似乎是根据数组中有多少项进行更新

视图：

@if (Model.SubMenu.Count > 8)
{
    <li style="display:inline;" id="MenuSearch">
        <input id="MenuSearchInput" class="form-control" type="text" style="margin:9px; width:90%" placeholder="Search" data-bind="value: query, valueUpdate: 'keyup'">
    </li>
    <li class="divider"></li>
    <li id="MenuSearchItem" role="menuitem" data-bind="foreach: FilteredItems">
        <a data-bind="text: name, click: Inventory.GetDomainFacilities"></a>
    </li>
}

视图模型：

(function (i) {
    "use strict";

    var vm = i.ViewModels || (i.ViewModels = {});

    vm.DomainSwitchViewModel = function (menuItem) {
        var self = this;
        var data = menuItem;

        self.query = ko.observable('');

        self.AllMenuItems = ko.observableArray([]);

        self.Update = function (data) {
            var mappedItems = _.map(data, function (item) {
                if (item.FacilityID) {
                    return {
                        id: item.FacilityID,
                        name: item.FacilityName,
                        type: 'Facility',
                        href: '/Home/SwitchDomain?' + 'domainID=' + item.DomainID + 'facilityID=' + item.FacilityID
                    }
                }
                else {
                    return {
                        id: item.DomainID,
                        name: item.Name,
                        type: 'Domain',
                        href: ''
                    }
                }
            })
            self.AllMenuItems(mappedItems);
        };

        self.FilteredItems = ko.computed(function () {
            var allItems = self.AllMenuItems();
            var search = self.query().toLowerCase();
            return ko.utils.arrayFilter(allItems, function (item) {
                return item.name.toLowerCase().indexOf(search) >= 0;
            });
        });

        self.Update(menuItem);
    }
    window.Inventory = i;
})(window.Inventory || {});

GetDomainFacilities：

i.GetDomainFacilities = function (menuItem) {
    $.ajax({
        type: 'GET',
        url: '/InventoryBase/GetDomainFacilities',
        data: { domainID: menuItem.id },
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {
            var updatedMenuItem = JSON.parse(data);
            vm.Update(updatedMenuItem);
            ko.cleanNode(document.getElementById("DropDownNavMenus"))
            ko.applyBindings(vm, document.getElementById("DropDownNavMenus"));
        }
    });
}

淘汰Array在UI中似乎不正确

0 个答案: