Question

我正在从顶级应用程序级别开始在EmberJS中搞乱JSON结构，并尝试将数据传递给一般的MenuController / MenuView子进程，以便我可以重用它。

我想出了JSON如何通过嵌套的ember结构传递数据：

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

Answer 1

使用模板，您应该使用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>

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

1 个答案: