敲除动态 foreach 绑定不起作用

Question

我是淘汰赛的新手。我做了两个 div 一个可见，一个不可见，我想在点击可见 div 上的 link 时显示隐藏的 div，然后将一个可观察数组绑定到一个隐藏 div 内的无序列表并显示隐藏 div 及其中的动态值。
HTML:

<div class="visiblediv">
    <ul>
        <li><a data-bind="click: showMenuInfos" href="#">MES INFOS</a>

        </li>
        <li><a data-bind="click: showMenuInter" href="#">DEMANDE</a>

        </li>
        <li><a data-bind="click: showMenuOffres" href="#">OFFRES</a>

        </li>
    </ul>
</div>
<div class="hiddendiv" data-bind="visible: subMenuVisible">
    <ul data-bind="foreach: subMenuItems">
        <li data-bind="text: item"></li>
    </ul>
</div>

JS:

function MenuFunctionVM() {
    self = this;
    self.subMenuVisible = ko.observable(false),
    self.subMenuItems = [],
    self.showMenuInfos = function () {
        this.subMenuVisible(!this.subMenuVisible());
        alert("clicked");
        this.subMenuItems = menuInfos;
    },
    self.showMenuInter = function () {
        this.subMenuVisible(!this.subMenuVisible());
        this.subMenuItems = menuInter;
    },
    self.showMenuOffres = function () {
        this.subMenuVisible(!this.subMenuVisible());
        this.subMenuItems = menuOffres;
    }
};

ko.applyBindings(new MenuFunctionVM());

请帮忙:)

Answer 1

这是一种方法。它会让你达到大约 75%，你需要添加逻辑来获得你正在寻找的行为。查看 JSFiddle 的工作演示

function MenuFunctionVM() {
        self = this;
        self.menuItems = [
            {
                name: "MES INFOS",
                items: ["item0", "item1", "item2"]
            },
            {
                name: "DEMANDE",
                items: ["item3", "item4", "item5"]
            },
            {
                name: "OFFRES",
                items: ["item6", "item7", "item8"]
            }
        ];
        self.subMenuVisible = ko.observable(false)
        self.subMenuItems = ko.observableArray([]);
        self.showMenu = function (data) {
            
            self.subMenuVisible(!self.subMenuVisible());
            alert("clicked");
            self.subMenuItems(data.items);
        }
    };
    ko.applyBindings(new MenuFunctionVM());

<div class="visiblediv">
    <ul data-bind="foreach: menuItems">
        <li>
            <a data-bind='click: $parent.showMenu,text: $data.name' href='#'></a>        
        </li>
    </ul>
</div>
<div class='hiddendiv' data-bind='visible: subMenuVisible'>
    <ul data-bind='foreach: subMenuItems'>
        <li data-bind='text: $data'></li>
    </ul>
</div>

敲除动态 foreach 绑定不起作用

Knockout dynamic foreach binding not working

html

javascript

knockout.js