knockout.js - 如何使用敲除在树模型中显示 json 数据？

Question

我有一个像这样的简单 json 文件。

 "Test":
    [
        {
            "id":"1",
            "type" : "test1"
        },
        {
            "id":"1.1",     
            "type":"test2"
        },
        {
            "id":"1.1.1",
            "type":"test3"
        },
        {
            "id":"1.1.2",
            "type":"test3"                
        }]

我想使用敲除在树模型中显示这些数据，如下所示。

      1 test1
      1.1  test2
         1.1.1  test3          
         1.1.2 test4

我还没有看到任何满足我要求的示例解决方案。有人可以指导我吗？谢谢你。

Answer 1

如果您的数组已正确排序，那么您可以使用style绑定通过根据 CSS 规则为 item 元素应用左填充：

<ul data-bind="foreach: test">
    <li data-bind="style: { paddingLeft: (id.length * 10) + 'px' }">
        <span data-bind="text: id"></span>
        <span data-bind="text: type"></span>
    </li>
</ul>

你可以在这里查看它是如何工作的：http: //jsfiddle.net/7vyfW/

此方法不会跟踪您的结构，因此如果您想创建可编辑列表，它是无用的。但是，如果您的任务只是显示一棵树，则它既简单又有效。