Javascript 如何处理敲除viewmodel中的嵌套菜单

我正在我的项目中使用knockoutjs。我有一个场景，我必须在我的viewmodel中创建一个嵌套菜单，我是这样做的：

self.menu = [
    { 
         name: 'Services', 
         sub: [{ name: 'Service-A' }, { name: 'Service-B' }] 
    },
    // etc
];

self.chosenMenu = ko.observable();

self.goToMenu = function (main, sub) {

    var selectedMenu = {
        main: main,
        sub: sub
    };

    self.chosenMenu(selectedMenu);
};

function findMenuItem(menuList, uniqueMenuIdentifier) {
    for (var i = 0; i < menuList.length; i++) {
        if (menuList[i].name === uniqueMenuIdentifier) {
            return menuList[i];
        }
        if (!!menuList[i].sub) {
            var subItem = findMenuItem(menuList[i].sub, uniqueMenuIdentifier);
            if (!!subItem) {
                return subItem;
            }
        }
    }
    return null;
}

self.goToMenu = function (menuItem) {
    var uniqueMenuIdentifier = menuItem.name;
    var item = findMenuItem(self.menu, uniqueMenuIdentifier);
    self.chosenMenu(item);
}

我的看法是：

然而，我觉得这种创建嵌套菜单的方法并不好，因为假设我想以编程方式处理任何菜单项，那么使用他的方法是不可能的

---

有谁能告诉我处理这种情况的好方法吗？

确保每个菜单项都有一个唯一的标识符。对于您提供的示例数据，

name

就足够了，但是您可能需要向菜单项视图模型添加一个

fullPath

属性

现在，您的

goToMenu

函数可以只获取一个参数：

uniquemenuidentier

，并递归遍历所有菜单项以找到正确的参数，如下所示：

self.menu = [
    { 
         name: 'Services', 
         sub: [{ name: 'Service-A' }, { name: 'Service-B' }] 
    },
    // etc
];

self.chosenMenu = ko.observable();

self.goToMenu = function (main, sub) {

    var selectedMenu = {
        main: main,
        sub: sub
    };

    self.chosenMenu(selectedMenu);
};

function findMenuItem(menuList, uniqueMenuIdentifier) {
    for (var i = 0; i < menuList.length; i++) {
        if (menuList[i].name === uniqueMenuIdentifier) {
            return menuList[i];
        }
        if (!!menuList[i].sub) {
            var subItem = findMenuItem(menuList[i].sub, uniqueMenuIdentifier);
            if (!!subItem) {
                return subItem;
            }
        }
    }
    return null;
}

self.goToMenu = function (menuItem) {
    var uniqueMenuIdentifier = menuItem.name;
    var item = findMenuItem(self.menu, uniqueMenuIdentifier);
    self.chosenMenu(item);
}

---

请参见演示。

我昨天遇到了类似的情况。你可以看看我的解决方案

---

. 主要的一点是，我使用了模板绑定来构建任意深度的层次菜单

看起来您已经以编程方式选择了菜单项：

$root.goToMenu（$parent，$data）您还可以考虑为每个菜单项添加一个唯一ID（如果它们没有一个）。这可能会简化搜索和选择菜单项。