aurelia and recursive binding

Question

Consider the following data:

[
{
 "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
      }
    ]
  }
]
}
]

And the corresponding component for each entry above is called menu-item. The html is as follows:

<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>

Note that menu-item renders itself recursively for each of the menu item's children. Up to this point, everything works great. Aurelia renders the root menu and all the child menus recursively. The problem is when I attempt to add a menu item to the existing list. I have a button which prompts the user for a menu text, and inserts it as the child of whatever menu is selected. For instance, if I have selected the item with id = 2, it is supposed to insert the new entry as the child of menu item 2. And although the viewmodel is updated, (the debugger very clearly shows that the model is changing, and the newly added item is there), the view is not. If I click on another page and come back to this page, then I can see the item I just added. I have tried everything I can think of, the signaler, the event aggregator, creating a getter on the children array. No matter what I do, the view does not reflect the changes in the children array. What am I doing wrong? What am I missing?

Thanks for the help!

UPDATE

Plunk added.

your code looks fine to me- please create a plunker and we'll troubleshoot it. Maybe you found a bug — Jeremy Danyow
It's hard to tell without seeing the rest of your code but put the logic that adds a new child inside of a setTimeout and see what happens. No delay is fine, so long as the code runs on the next pass. This is just a guess. — hfitzwater
Ok guys, plunk created. Sorry for the number of files in the plunk, just wanted to make sure that the environments and the data are exactly the same. The plunk is at plnkr.co/edit/agSe4f?p=preview . Please note that once you browse to the page, you will see a menu structure on the left pane, and each root menu might have sub-menus. High light one of the menu items and on the right pane, select Add Child. If the menu item has children already, the display is updated immediately. If the menu item does not have any children, display is not updated. Any questions, let me know. Thanks! — freud

Jeremy Danyow Jeremy Danyow · Accepted Answer · 2016-02-11T22:36:16

This was a tricky one- the issue is hasChildren and expanded are not updated on the menu element after a child has been pushed into the data structure.

Here's a plunker that removes the hasChildren check and the expanded check just to demonstrate that your main logic is working properly, just needs a few tweaks.

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

aurelia and recursive binding

1 Answers