Question

我只是测试了ember所以这将是一个非常简单的问题（可能更像是一个javascript而不是ember问题）。我想迭代一个路径模型中的一组对象。它基本上是一个菜单，带有嵌套的menu_headers，每个menu_header都可以有（children）menu_headers或menu_items。我会尝试发布大部分代码，以便在遇到问题时，可以指出它们。

{
    "status": "success",
    "data": {
        "id": 5,
        "name": "my menu here",
        "menu_headers": [
            {
                "name": "menu header1",
                "id": 13,
                "menu_items": [
                    {
                        "id": 205,
                        "header": "my header"
                    }
                ],
                "menu_headers": [
                    {
                        "id": 14,
                        "name": "menu header1",
                        "menu_items": [
                            {
                                "id": 34,
                                "header": "item",
                                "detail": "item detail"
                            },
                            {
                                "id": 34,
                                "header": "item2",
                                "detail": "item detail2"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

模型：

Hex.Menu = Ember.Object.extend({
  id: null,
  name: null,
  menu_headers: null
});

Hex.MenuHeader = Ember.Object.extend({
    id: null,
    name: null,
    menu_headers: null
});

Hex.MenuItem = Ember.Object.extend({
    id: null,
    header: null,
    detail: null,
    menu_items: null

});

在我的路线中，我如何迭代这个（参见下面的评论部分）？我不知道它是forEach还是我应该使用jQuery $ .each？另外，这样做是否允许双向数据绑定？

Hex.MenuRoute = Ember.Route.extend({
    model: function(params) {
        return $.getJSON("/arc/v1/api/menus-test/5").then(function(data){
          d=data.data;
          var menu = Hex.Menu.create();
          menu.set('id', d.id);
          menu.set('name', d.name);
          forEach()  //??? 
          // ????          
         return menu;
        });
    }
});

thx以及上述代码的任何建议或问题都将不胜感激。

Answer 1

jQuery的每一个似乎都做得很好。想递归地做这个，但这似乎工作正常。

    d=data.data;
    var menu = Hex.Menu.create();
    menu.set('id', d.id);
    menu.set('name', d.name);
    //forEach()
    $.each(d.menu_headers, function(key, value){
       var mh=Hex.MenuHeader.create();
       mh.set('id',value.id);
       mh.set('name',value.name);
       $.each(value.menu_items, function(key2, mi){
         var menu_item=Hex.MenuItem.create();
         menu_item.set('id', mi.id);
         menu_item.set('header', mi.header);
         mh.menu_items.pushObject(menu_item);

       });
       $.each(value.menu_headers, function(k3, mh2){
         var mh=Hex.MenuHeader.create();
         mh.set('id',value.id);
         mh.set('name',value.name);
         mh.menu_headers.pushObject(mh);
        });
       menu.menu_headers.pushObject(mh);
    });
    return menu;

Answer 2

Ember与pojos完美搭配，因为它是一个菜单，我不确定创建对象是否真的让你获益匪浅。我只是渲染它们并使用递归模板（我可能错过了一条路径，但这个节目是要点）

http://emberjs.jsbin.com/UMAvEke/1/edit

  <script type="text/x-handlebars" data-template-name="menu">
    <h4>Menu Name : {{name}}</h4>
    {{render 'menu_headers' menu_headers}}
  </script>

  <script type="text/x-handlebars" data-template-name="menu_headers">
    <ul>
    {{#each item in this}}
      <li>
        Header: {{item.name}}
        {{render 'menu_items' item.menu_items}}
        {{render 'menu_headers' item.menu_headers}}
      </li>
    {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="menu_items">
    <ul>
    {{#each item in this}}
      <li>
        Item header: {{item.header}}
        {{#if item.detail}}
        <br/>
          Item detail: {{item.detail}}
        {{/if}}
        {{render 'menu_items' item.menu_items}}
      </li>
    {{/each}}
    </ul>
  </script>

通过json对象数组进行ember和迭代

2 个答案: