尝试使用knockout.js将对象数组绑定到表中

时间:2015-10-20 12:52:31

标签: knockout.js data-binding

我有一个以下格式的对象数组,名称,状态和Cells.Cells保持背景颜色。

Result =
    {
    "Name" : "Check",
    "Status" : 0,
    "Cells" : [#A9A9F5,#8181F7,#8258FA,#8258FA,#8258FA] ,

    "Name" : "Test",
    "Status" : 1,
    "Cells" : [#8181F7,#8258FA,#8181F7,#8258FA,#8258FA] 
}

我使用knockout来绑定它们并在表格中显示结果。我想要的输出是在表中得到以下结果。单元格颜色将是单元格的背景颜色。

   Check|0|[Cell Color1]|[Cell Color2]|[Cell Color3]|[Cell Color4]|[Cell Color5]
    Test|1|[Cell Color1]|[Cell Color2]|[Cell Color3]|[Cell Color4]|[Cell Color5]

到目前为止我所拥有的是

            <table border="1">
            <tbody data-bind="foreach: Result">
                <tr>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: Status"></td>
                    <td data-bind="foreach: Cells">
                     <td data-bind="style: {'background-color':Cells}"></td></td>

                </tr>
            </tbody>

        </table>

我得到以下结果

Check|0|
Test|1|

但不是具有相应背景颜色的细胞。如何访问“Cell&#39;内部的对象?并让他们生成自己的具有相应背景颜色的单元格?感谢

1 个答案:

答案 0 :(得分:2)

您可以使用$ data变量访问foreach绑定的当前迭代。 你也可以想要替换

<td data-bind="foreach: Cells">

<!-- ko foreach: Cells -->
 <td data-bind="style:{'background-color':$data}></td>
<!-- /ko -->

因为@super cool在评论中注明 - td内的td无效