用于绑定键/值 ObservableArray 的 Foreach 循环答案

【问题标题】：Foreach loop for binding key/value ObservableArray用于绑定键/值 ObservableArray 的 Foreach 循环
【发布时间】：2014-09-01 13:36:20
【问题描述】：

我正在尝试基于一个填充了菜单项的 observablearray 创建一个菜单。我也有 div 在单击菜单项时应该可见，问题是这些 div 具有基于其指定菜单项的数组位置的可见绑定。这一直有效，直到我尝试将一些菜单项删除/添加到数组中，我意识到这是一种将菜单项绑定到 div 的可怕方式。

作为一种解决方案，我决定使用键/值 observablearray，因此添加或删除菜单项并不重要。我让它适用于具有绑定的单个菜单项，但我无法让它与 foreach 循环一起使用（以显示一组菜单项）。

这里是小提琴：http://jsfiddle.net/Dennis50/uu2u90my/

例如，我会让这个工作：

<h2 data-bind="text: $root.parentArray()[0].project.childObservableArray()[0].klimaat.destUrl()"></h2>

但是当我尝试让它为多个菜单项工作时，我无法让它工作：

<div data-bind="foreach: $root.parentArray()[0].project.childObservableArray()[0]">
   <h2 data-bind="text: destUrl()"></h2>    
</div>

那么我如何使用 foreach 循环绑定这些菜单项，它甚至是解决这个问题的最佳方法吗？

【问题讨论】：

你可以使用Object.keys(...)，就像这个更新的sample一样。我会建议你一个更好的方法，但我不明白你想要达到什么目的。
谢谢，这解决了我的问题！不过，我想听听您的更好方法，此示例是更大菜单的一部分，用户还可以在其中添加/删除新菜单项，单击菜单项会显示用户可以填写的某个 div数据。
好的，@raheelshan 提出了一个很好的解决方案。它与您想要实现的目标有何不同，应该采取哪些不同的做法？
我认为必须推动每个菜单项会很痛苦，因为较大的菜单有 4 或 5 层深并且有相当多的菜单项，因此其他人更容易编辑数组而不是必须弄清楚整个菜单的结构。对于遇到类似问题的人，我会将他的答案标记为正确。

标签： knockout.js

【解决方案1】：

您可以按照这个简单而好的解决方案

查看

<ul data-bind='foreach:Menu'>
    <li data-bind="text:Description,click:Action"></li>
</ul>   

<div data-bind="visible:FirstDiv">
    Hi !i am first div
</div>

<div data-bind="visible:SecondDiv">
    And i am the second one
</div>

视图模型

function Menu(obj){
    var self = this
    self.Description = ko.observable(obj.Description)
    self.Action = obj.Action
}
var vm = function(){
    var self = this
    self.Menu = ko.observableArray([])
    self.FirstDiv = ko.observable(true)
    self.SecondDiv = ko.observable(false)

    self.LoadData = function(){
        self.Menu.push(new Menu({ Description: 'Home', Action : self.EnableFirstDiv }))
        self.Menu.push(new Menu({ Description: 'About', Action : self.EnableSecondDiv }))
    }

    self.EnableFirstDiv = function (data) {
        self.SecondDiv(false)
        self.FirstDiv(true)
    }

    self.EnableSecondDiv = function (data) {
        self.FirstDiv(false)
        self.SecondDiv(true)
    }        

    self.LoadData();
}    
$('document').ready(function () {
    ko.applyBindings(new vm())
})

Fiddle Demo

【讨论】：