如何使用敲除在动态添加的属性上绑定嵌套的 foreach 循环？答案

【问题标题】：How do I use knockout to bind nested foreach loops on dynamically added properties?如何使用敲除在动态添加的属性上绑定嵌套的 foreach 循环？
【发布时间】：2014-03-13 20:48:16
【问题描述】：

我有一些物品。这些项目被分解为“类型”，然后在类型内进一步划分为“类别”。我事先不知道“类型”或“类别”的名称。

我想做一些嵌套的 foreach 绑定来分层表示数据。像这样的：

<ul data-bind="foreach: OrderItems.Types">
<li>
    ItemType: <span data-bind='text: $data'></span>
    <ul data-bind="foreach: Categories">
      <li>
        Category: <span data-bind='text: $data'></span>
        <ul data-bind="foreach: OrderItems">
          <li>
            Item: <span data-bind="text: Name"> </span>
          </li>
        </ul>              
      </li>
    </ul>
</li>

var order = {
"OrderNumber": "394857",
"OrderItems": {
    "Types": {
        "Services": {
            "Categories": {
                "carpet cleaning": {
                    "OrderItems": [
                        {
                            "OrderItemID": "9d398f88-892c-11e3-8f31-18037335d26a",
                            "Name": "ARug-Oriental Rugs (estimate on site)"
                        },
                        {
                            "OrderItemID": "9d398f53-892c-11e3-8f31-18037335d26a",
                            "Name": "C1-Basic Cleaning  (per room)"
                        },
                        {
                            "OrderItemID": "9d398f54-892c-11e3-8f31-18037335d26a",
                            "Name": "C2-Clean & Protect  (per room)"
                        },
                        {
                            "OrderItemID": "9d398f55-892c-11e3-8f31-18037335d26a",
                            "Name": "C3-Healthy Home Package (per room)"
                        }
                    ]
                },
                "specialty": {
                    "OrderItems": [
                        {
                            "OrderItemID": "9d398f8f-892c-11e3-8f31-18037335d26a",
                            "Name": "SOTHR-Other"
                        }
                    ]
                },
                "tile & stone": {
                    "OrderItems": [
                        {
                            "OrderItemID": "9d398f8e-892c-11e3-8f31-18037335d26a",
                            "Name": "TILE-Tile & Stone Care"
                        }
                    ]
                },
                "upholstery": {
                    "OrderItems": [
                        {
                            "OrderItemID": "9d398f7b-892c-11e3-8f31-18037335d26a",
                            "Name": "U3S1-Upholstery - Sofa (Seats 3: 7 linear feet)"
                        },
                        {
                            "OrderItemID": "9d398f7c-892c-11e3-8f31-18037335d26a",
                            "Name": "U3S2-Upholstery - Sofa - Clean & Protect (Seats 3: 7 linear feet"
                        }
                    ]
                }
            }
        },
        "Products": {
            "Categories": {
                "carpet cleaning": {
                    "OrderItems": [
                        {
                            "OrderItemID": "9d398f84-892c-11e3-8f31-18037335d26a",
                            "Name": "PLB-Leave Behind Item"
                        }
                    ]
                }
            }
        }
    }
}
};

var viewModel = ko.mapping.fromJS(order);
ko.applyBindings(viewModel);

这是上面代码的一个小提琴：http://jsfiddle.net/mattlokk/6Q5f7/5/

【问题讨论】：

我不明白这个问题 - 你不需要知道传递的值，只需要知道结构，除非我遗漏了什么。你能解释一下你的小提琴中存在的问题吗？
它没有生成任何
s

【解决方案1】：

要绑定到您的结构，您需要将对象转换为数组。鉴于您正在使用映射插件，最简单的方法可能是使用将具有属性的对象转换为键/值数组的绑定。

这是一个示例绑定：

ko.bindingHandlers.objectForEach = {
    init: function(element, valueAccessor, allBindings, data, context) {
        var mapped = ko.computed({
            read: function() {
                var object = ko.unwrap(valueAccessor()),
                    result = [];

                ko.utils.objectForEach(object, function(key, value) {
                    var item = {
                        key: key,
                        value: value
                    };

                    result.push(item);
                });


                return result;
            },
            disposeWhenNodeIsRemoved: element
        });

        //apply the foreach bindings with the mapped values
        ko.applyBindingsToNode(element, { foreach: mapped }, context);

        return { controlsDescendantBindings: true };   
    }
};

这将创建一个动态计算，将对象映射到键/值数组。现在您可以对您的对象使用objectForEach 而不是foreach。

这是一个基本示例：http://jsfiddle.net/rniemeyer/nn3jg/，这是一个使用小提琴的示例：http://jsfiddle.net/rniemeyer/47Wbe/

【讨论】：

太棒了。完美的。正是我想要的。