Knockout.js自定义数组foreach循环无法获取colors.standard下color_name问题

你写法出错的核心原因是 Knockout 原生foreach绑定仅支持遍历数组类型数据，而你数据结构里的colors.standard是键值对格式的普通对象（键为27、28这类字符串ID，值为颜色详情对象），直接遍历对象自然无法拿到预期的color_name字段。

方案1：直接在视图层转换对象为数组（最快生效） #

直接在foreach绑定里用Object.values()把standard对象的值提取为数组，无需修改JS逻辑，正确写法如下：

<div data-bind="foreach: { data: doorColorList, as: 'column' }">
    <span class="style-name" data-bind="text: name"></span>
    <!-- 用Object.values把standard对象转为数组，遍历每个颜色详情 -->
    <div data-bind="foreach: { data: Object.values(column.colors.standard), as: 'colorItem' }">
        <!-- 直接取color_name字段即可 -->
        <p data-bind="text: colorItem.color_name"></p>
    </div>
</div>

该方案适合不需要兼容IE8及更早旧浏览器的场景。

方案2：在ViewModel层预处理数据（兼容性更好，逻辑更规范） #

如果要兼容旧浏览器，或者不想把数据处理逻辑写在视图里，可以在ViewModel中把standard对象提前转为数组：

// 假设你的doorColorList是Observable数组，处理每个item的colors.standard
self.processedDoorColorList = ko.computed(function() {
    return ko.utils.arrayMap(self.doorColorList(), function(column) {
        // 把standard对象转为数组
        column.standardColorArray = [];
        for (var key in column.colors.standard) {
            if (column.colors.standard.hasOwnProperty(key)) {
                column.standardColorArray.push(column.colors.standard[key]);
            }
        }
        return column;
    });
});

对应的视图写法直接遍历预处理好的数组即可：

<div data-bind="foreach: { data: processedDoorColorList, as: 'column' }">
    <span class="style-name" data-bind="text: name"></span>
    <div data-bind="foreach: { data: column.standardColorArray, as: 'colorItem' }">
        <p data-bind="text: colorItem.color_name"></p>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Jimit Bhavsar