[英]Working with Knockout 'foreach' looping through multidimensional array
I have a multidimensional associative array. 我有一个多维关联数组。
this.items = ko.observableArray([
{ name: "name1", viewable: true, children: [
{ name: "name1-1", viewable: true, children: []},
{ name: "name1-2", viewable: false, children: []}
] },
{ name: "name2", viewable: false, children: [] },
{ name: "name3", viewable: true, children: [
{ name: "name3-1", viewable: true, children: []},
] },
{ name: "name4", viewable: true, children: [] }
]);
The goal is to loop through this array and print out only the values that have 'viewable' set to true. 目标是遍历此数组并仅打印出“可查看”设置为true的值。
I have this working using a bunch of if and foreach statements, but the code is starting to get out of hand. 我使用了一堆if和foreach语句,但代码开始失控。 This example only covers 2 levels buy my array can get up to 5 levels deep , so this code is going to multiply and get ugly really quick .
这个例子只涵盖2个级别购买我的数组可以达到5级深度 ,所以这个代码将成倍增加并且变得非常快速 。
<ul data-bind="foreach: items">
<!-- ko if: viewable -->
<li data-bind="text: name"></li>
<!-- ko foreach: children -->
<!-- ko if: viewable -->
<li data-bind="text: name"></li>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</ul>
So is there an easier/better way to loop through the entire array? 那么循环整个数组有更简单/更好的方法吗?
Underscore.js has some nice method working with arrays maybe you can use flatten and filter to create one array from your structure then you can just write one foreach
: Underscore.js有一些很好的方法使用数组也许你可以使用flatten和filter从你的结构创建一个数组然后你可以写一个
foreach
:
Or you could use templates to encapsulate your if: viewable
logic and apply the template recursively: 或者您可以使用模板封装
if: viewable
逻辑并递归应用模板:
<script type="text/html" id="template">
<!-- ko if: viewable -->
<li data-bind="text: name"></li>
<!-- ko template: { name: 'template', foreach: $data.children } -->
<!-- /ko -->
<!-- /ko -->
</script>
<ul data-bind="template: { name: 'template', foreach: items } ">
</ul>
What you need is a template: 你需要的是一个模板:
<script type="text/html" id="ItemTemplate">
<!-- ko if: viewable -->
<li data-bind="text: name"></li>
<!-- ko template: { name: 'ItemTemplate', foreach: children } --><!-- /ko -->
<!-- /ko -->
</script>
And then just: 然后就是:
<ul data-bind="template: { name: 'ItemTemplate', foreach: items }"></ul>
If you add empty children arrays on items you can use template 如果在项目上添加空子数组,则可以使用模板
<ul data-bind="foreach: items">
<idv data-bind="template: {name: 'mytemp'}" />
</ul>
<div data-bind="stopBinding:true">
<div id="mytemp">
<div data-bind="visible :viewable">
<li data-bind="text: name"></li>
<div data-bind="foreach: children">
<div data-bind="template: {name: 'mytemp'}" /></div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.