Aurelia 和递归绑定

Question

考虑以下数据：

[
{
 "id": 1,
 "text": "I am parent",
 "children": [
  {
    "id": 2,
    "text": "I am child",
    "parentId": 1,
    "children": [
      {
        "id": 4,
        "text": "I am a grand child",
        "parentId": 2,
        "children": null
      },
      {
        "id": 5,
        "text": "I too am a grand child",
        "parentId": 2
      }
    ]
  }
]
}
]

上面每个条目的相应组件称为菜单项。网页如下：

<template>
  <ul class="menu-item-list" show.bind="expanded">
    <li class="" repeat.for="child of menu.children">
      <menu-item menu.bind="child"></menu-item>
    </li>
  </ul>
</template>

请注意，菜单项以递归方式呈现每个菜单项的子项。到目前为止，一切都很好。Aurelia 以递归方式呈现根菜单和所有子菜单。问题是当我尝试将菜单项添加到现有列表时。我有一个按钮，提示用户输入菜单文本，并将其作为所选菜单的子菜单插入。例如，如果我选择了id = 2的项，则应将新条目插入为菜单项2的子项。尽管视图模型已更新(调试器非常清楚地显示模型正在更改，并且新添加的项在那里(，但视图没有。如果我单击另一个页面并返回此页面，则我可以看到刚刚添加的项目。我已经尝试了我能想到的一切，信号器，事件聚合器，在子数组上创建一个getter。无论我做什么，视图都不会反映子数组中的更改。我做错了什么？我错过了什么？

感谢您的帮助！

更新

普伦克补充道。

Answer 1

这是一个

棘手的问题 - 问题hasChildren，并且在将孩子推入数据结构后expanded菜单元素上不会更新。

这是一个删除hasChildren检查和扩展检查的plunker，只是为了证明您的主要逻辑正常工作，只需要进行一些调整。

http://plnkr.co/edit/n0RFaeS5wr9EpbkrrBbX?p=preview