在EmberJS中向嵌套的控制器/视图发送数据

Sending data into a nested Controller/View in EmberJS

本文关键字：视图 数据 控制器 EmberJS 嵌套      更新时间：2023-09-26

我在EmberJS中的JSON结构从顶层应用程序层开始，并试图将数据传递给一般的MenuController/MenuView子节点，以便我可以重用它。

JSON我已经想出了玩周围如何通过嵌套余烬结构的数据传递是这样的:

JSON 

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

车把

<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数据传递给嵌入在同一视图中的子控制器。我有一种感觉，你可以通过模板和编程来做到这一点?如果是这样，你会如何做到两者兼得?

使用模板你应该使用render。这就是你应该做的，编程是没有意义的。

<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>
相关文章：