CODEWITHSUNDEEP
javascriptember.js
user3350508
user3350508

Reputation: 123

Sending data into a nested Controller/View in EmberJS

I'm messing around with JSON structures in EmberJS starting from the top level Application level and trying to pass data to a general MenuController/MenuView child so I can reuse it.

The JSON I've come up with to play around with how data gets passed through nested ember structures is this:

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");
   }

});

All the examples I've seen concerning nested stuff involves routes with the classic _id subroute. I'm not sure how I would go about telling the App Router that it needs to pass the menuItems data to a child controller that's embedded in the same view. I have a feeling you can do this both via the template and programmically? If so, how would you do it both ways?

Upvotes: 1

Views: 92

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

using the template you should use render. And that's the way you should do it, programmatically doesn't make sense.

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

Upvotes: 1

Related Questions