Question

我尝试根据填充了菜单项的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循环绑定这些菜单项，它甚至是解决此问题的最佳解决方案？

Answer 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())
})

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

1 个答案:

Fiddle Demo