Javascript aurelia与递归绑定

考虑以下数据：

[
{
“id”：1，
“文本”：“我是父母”，
“儿童”：[
{
“id”：2，
“文本”：“我是孩子”，
“家长ID”：1，
“儿童”：[
{
“id”：4，
“文本”：“我是一个孙子”，
“家长ID”：2，
“children”：空
},
{
“id”：5，
“文本”：“我也是一个孙子”，
“家长ID”：2
}
]
}
]
}
]

上面每个条目对应的组件称为菜单项。html格式如下：

<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的子项。尽管viewmodel已更新（调试器非常清楚地显示模型正在更改，并且新添加的项在那里），但视图是而不是。如果我单击另一个页面并返回此页面，那么我可以看到我刚才添加的项目。我已经尝试了我能想到的一切，信号器，事件聚合器，在子数组上创建一个getter。无论我做什么，视图都不会反映子数组中的更改。我做错了什么？我错过了什么

谢谢你的帮助

更新

---

添加。

这是一个棘手的问题-问题是将子项推入数据结构后，菜单元素上的子项和扩展的子项不会更新

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

---

您的代码在我看来很好-请创建一个新代码，我们将对其进行故障排除。也许您发现了一个错误，如果不查看代码的其余部分就很难判断，但是将添加新子项的逻辑放在setTimeout中，然后看看会发生什么。只要代码在下一个过程中运行，没有延迟是可以的。这只是猜测。好了，伙计们，普朗克创造了。很抱歉plunk中的文件太多，只是想确保环境和数据完全相同。砰的一声响了。请注意，浏览页面后，您将在左窗格中看到菜单结构，每个根菜单可能都有子菜单。高亮显示其中一个菜单项，然后在右侧窗格中选择“添加子项”。如果菜单项已经有子项，则会立即更新显示。如果菜单项没有任何子项，则不会更新显示。有任何问题，请告诉我。谢谢非常感谢你的帮助。非常感谢。另外，感谢您在如此出色的框架上所做的工作。我们从Angular转向Aurelia，再也没有回头看。