淘汰赛动态foreach绑定不起作用答案

【问题标题】：Knockout dynamic foreach binding not working淘汰赛动态foreach绑定不起作用
【发布时间】：2015-05-06 04:17:53
【问题描述】：

我是新来的淘汰赛。我让两个 div 一个可见一个不可见，我想在单击可见 div 上的链接时显示隐藏的 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());

请帮忙:)

【问题讨论】：

标签： javascript html knockout.js

【解决方案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>

【讨论】：