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

上面每个条目的相应组件称为menu-item。 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的子项插入。尽管视图模型已更新，（调试器非常清楚地表明模型正在更改，并且新添加的项目在那里），视图不。如果我点击另一页并返回此页面，那么我可以看到我刚刚添加的项目。我已经尝试了我能想到的一切，信号器，事件聚合器，在children数组上创建一个getter。无论我做什么，视图都不会反映子数组中的更改。我究竟做错了什么？我错过了什么？

感谢您的帮助！

更新

Plunk已添加。

Answer 1

这是一个棘手的问题 - 在将子项推入数据结构后，问题是struct并且// Loops through CPT and puts both city and name into array // TODO: Rename hometown to something more relevant while ($loop->have_posts()) : $loop->the_post(); $post_meta = get_post_meta($post->ID, 'hometown', true); $title = get_the_title($post->ID); if ( !empty ( $post_meta ) || !empty ( $title ) ) { $hometown[] = array( 'city' => $post_meta, 'name' => $title ); } endwhile; <script> var hometown = <?php echo wp_json_encode($hometown); ?>; var map = L.map('map').setView([40, 0], 2); L.mapbox.accessToken = 'myToken'; var geocoder = L.mapbox.geocoder('mapbox.places'); for ( var i = 0; i < hometown.length; i++ ) { geocoder.query(hometown[i].city, showLoc); } L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=myToken', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.streets' }).addTo(map); function showLoc(err, data) { L.marker([data.latlng[0], data.latlng[1]], 2) .bindPopup(hometown[0].name) .addTo ( map ); } </script>未在菜单元素上更新。

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

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

aurelia和递归绑定

1 个答案: