javascript - 在knockoutJs中使用父ID的嵌套菜单

Question

我尝试使用客户端给定的 json 数据创建嵌套菜单。

数据:

var serverData = [
      {
        Id: "menuColorSearch",
        Text: "Color search"
      },
      {
        Id: "menuAncillaryProductMix",
        Text: "Ancillary product mix"
      },
      {
        Id: "menuDocuments",
        Text: "Documents"
      },
      {
        Id: "menuColorInfo",
        ParentId: "menuDocuments",
        Text: "Color info"
      },
      {
        Id: "menuReports",
        ParentId: "menuDocuments",
        Text: "Reports"
      },
      {
        Id: "menuMaintenance",
        Text: "Maintenance"
      },
      {
        Id: "menuPriceManagement",
        ParentId: "menuMaintenance",
        Text: "Price management"
      }
    ];

我正在尝试这样:

var Menu = function(dept, all) {
    var self = this;
    this.id = dept.Id;
    this.name = ko.observable(dept.Text);
    this.parentId = dept.ParentId;
    this.children = ko.observableArray();

    ko.utils.arrayForEach(all || [], function(menu) {

        if(menu.ParentId){
            if (menu.ParentId === self.id) {
                self.children.push(new Menu(menu, all));
            }
        }else{
            new Menu(menu, all)
        }
    });
};

var ViewModel = function(data) {
    this.root = new Menu(data[0], data);
};


$(function() {
    ko.applyBindings(new ViewModel(serverData));
});

模板:

<div data-bind="with: root">
    <ul data-bind="template: 'deptTmpl'">
    </ul>
</div>

<script id="deptTmpl" type="text/html">
    <li>
        <a data-bind="text: name"></a>
        <ul data-bind="template: { name: 'deptTmpl', foreach: children }">
        </ul>
    </li>
</script>

问题是它只有在第二个和第三个对象具有父 ID 时才起作用。我正在尝试类似的方法，它应该根据给定的 json 数据制作嵌套菜单。所以 id 对象上没有父 id，它应该添加到根上。如果对象有父 ID，则应根据父 ID 添加。

请帮助我更正我的代码，或者如果这是在 KnockoutJS 中执行此操作的另一种方法，请指导我。

谢谢

Answer 1

这应该对您有帮助 http://jsfiddle.net/MCNK8/3/ ，主要思想是通过将子级放置在父级中来重建主数据数组

HTML

<script id="nodeTempl" type="text/html">
    <li>
        <a data-bind="text: Text"></a>
        <ul data-bind="template: {name: nodeTemplate, foreach: children }"></ul>
    </li>
</script>

<script id="nodeLeafTempl" type="text/html">
    <li>
        <a data-bind="text: Text"></a>
    </li>
</script>

<ul data-bind="template: {name: nodeTemplate, foreach: children }"></ul>

Javascript(@see fiddle)

var serverData = [
      {
        Id: "menuColorSearch",
        Text: "Color search"
      },
      {
        Id: "menuAncillaryProductMix",
          ParentId: 'menuColorSearch',
        Text: "Ancillary product mix"
      },
      {
        Id: "menuDocuments",
        Text: "Documents"
      },
      {
        Id: "menuColorInfo",
        ParentId: "menuReports",
        Text: "Color info"
      },
      {
        Id: "menuReports",
        ParentId: "menuDocuments",
        Text: "Reports"
      },
      {
        Id: "menuMaintenance",
          ParentId: 'menuReports',
        Text: "Maintenance"
      },
      {
        Id: "menuPriceManagement",
        ParentId: "menuMaintenance",
        Text: "Price management"
      }
    ];



function getNestedMenu(index, all) {
    var root = all[index];

    if(!root){
        return all;
    }

    if(!all[index].children){
        all[index].children = [];
    }

    for(var i = 0; i < all.length; i++){
        //<infinity nesting?>

        //put children inside it's parent
        if(all[index].Id == all[i].ParentId){
            all[index].children.push(all[i]);
            all[i].used = true;
        }

        //this is needed for each item, to determine which template to use        
        all[index].nodeTemplate = function(node) {
            return node.children.length > 0 ? 'nodeTempl' : 'nodeLeafTempl';
        }
        //</infinity nesting?>
    }

    return getNestedMenu(++index, all);
};

function getModel(data) {
    var items = getNestedMenu(0, data);

    //<remove duplicates, for infinity nesting only>   
    for(var i = 0; i < items.length; i++){
        if(items[i].used){
            items.splice(i, 1);
            i--;
        }
    }
    //</remove duplicates, for infinity nesting only>
    //<build root item>
    var model = {};
    model.children     = ko.observableArray(items);
    model.nodeTemplate = function(node) {
        return node.children.length > 0 ? 'nodeTempl' : 'nodeLeafTempl';
    }
    //</build root item>
    console.log(items);
    return model;
};


(function() {
    //new ViewModel(serverData);
    ko.applyBindings(getModel(serverData));
})();