javascript - 将数据发送到 EmberJS 中的嵌套 Controller / View

Question

我从顶级应用程序级别开始摆弄 EmberJS 中的 JSON 结构，并尝试将数据传递给通用 MenuController/MenuView 子级，以便我可以重用它。

我想出的用于解决数据如何通过嵌套 ember 结构传递的 JSON 是这样的:

JSON

{
appName: "CheesyPuffs"
menuItems: [
    {name:"Gouda"}
    {name:"Crackers", menuItems: [
                              {name: "Cheezeits"}
                            ] 
    }
]

}

Handlebars

<script type="text/x-handlebars">
<div class='app'>
  <div class='header'>
     {{#if menuItems}}
    // Embed template 'menu'
     {{/if}}
  </div>
</div>
</script>

<script type="text/x-handlebars" data-template-name="menu">
<ul>
{{#each menuItems}}
    <li>{{name}}</li>
    {{#if menuItems}}
       // Embed menu template
     {{/if}}
{{/each}}
</ul>
</script>

JS

App.MenuController = Ember.ArrayController.extend({
    actions: {
        click: function(){
           // Signal Event to App
        }
    }
});
App.MenuView = Ember.View.extend({

   click: function(){
        console.log("I clicked a menu");
   }

});

我见过的所有关于嵌套内容的示例都涉及带有经典 _id 子路由的路由。我不确定如何告诉 App Router 它需要将 menuItems 数据传递到嵌入同一 View 中的子 Controller 。我感觉你可以通过模板和编程来做到这一点？如果是这样，你会如何同时做到这一点？

Answer 1

使用模板时，您应该使用渲染。这就是你应该这样做的方式，以编程方式没有意义。

<script type="text/x-handlebars">
<div class='app'>
  <div class='header'>
     {{#if menuItems}}
        {{render 'menu' menuItems}}
     {{/if}}
  </div>
</div>
</script>

<script type="text/x-handlebars" data-template-name="menu">
<ul>
{{#each menuItems}}
    <li>{{name}}</li>
    {{#if menuItems}}
        {{render 'menu' menuItems}}
     {{/if}}
{{/each}}
</ul>
</script>