绑定键/值ObservableArray的Foreach循环

本文介绍了绑定键/值ObservableArray的Foreach循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图基于一个填充有菜单项的observablearray创建一个菜单.我也有div，当单击菜单项时它应该变得可见，问题是这些div具有基于其指定菜单项的数组位置的可见绑定.这一直有效，直到我尝试将一些菜单项删除/添加到数组中并且我意识到这是将菜单项绑定到div的一种可怕方法.

作为解决方案，我决定使用键/值observablearray，因此添加或删除菜单项都没有关系.我使它适用于具有绑定的单个菜单项，但无法使其与foreach循环一起使用(以显示一组菜单项).

这是小提琴: jsfiddle/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循环绑定这些菜单项，它甚至是解决此问题的最佳解决方案吗?

解决方案

您可以遵循这个简单而又不错的解决方案

查看

<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>

Viewmodel

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

小提琴演示

I'm trying to create a menu based on an observablearray filled with menu items. I also have div's which should get visible when the menu item is clicked, the problem is that these div's had visible bindings based on the array position of their specified menu item. This worked till i tried to remove/add some menu item to the array and i realised it is a horrible way of binding the menu items to the divs.

As a solution I decided to use a key/value observablearray so it wouldn't matter if a menu item was added or removed. I got this to work for single menu items with bindings but I can't get it to work with a foreach loop (to show a set of menu items).

Here is the Fiddle: jsfiddle/Dennis50/uu2u90my/

For example I would get this to work:

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

But when I try to get it to work for multiple menu items I can't get this to work:

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

So how do I bind these menuitems using the foreach loop and is it even the best solution to this problem?

解决方案

You can follow this simple and nice solution

View

<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>

Viewmodel

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