Geek Answers Handbook

Ember.js and nested templates / views

I'm still trying to learn ember.js, so please bear with me.

goal

I am currently creating a one-page web application. To the application, the application will make an ajax call, which will return a list of numbers. The application will process these numbers and create a div for each of the numbers and store it in a div container.

A click event will be associated with each div, so when a user clicks on a link, a pop-up dialog will appear.

code

Index.html

<script type="text/x-handlebars"> <h2>Welcome to Ember.js</h2> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="payloads"> <div class="page"> <div id="desktopWrap"> <div id="theaterDialog" title="Theater View" class="bibWindow1"> {{view.name}} {{#each item in model}} <div {{bindAttr id="item"}} {{action click item}}> <div class="thumb1" ></div> <div class="userDetails1">Payload {{item}}</div> <div class="online1" ></div> </div> <div class="spacer10"></div> {{/each}} </div> </div> </div> </script>

My app.js file is here:

 App = Ember.Application.create(); App.Router.map(function() { }); App.IndexRoute = Ember.Route.extend({ model: function() { return ['Payload_1', 'Payload_2', 'Payload_3']; } }); App.PayloadsRoute = Ember.Route.extend({ model: function() { return ['Payload_1', 'Payload_2', 'Payload_3']; } }) App.IndexController = Ember.ObjectController.extend( { click: function(e) { alert("clicked:" + e); } })

General idea

In the current code above, a "TheaterDialogue" section with three divs will be created. The onclick action is associated with it through the controller for each of these divs. When the user clicks on the first div, "payload 1" will be printed in the notification window, the second div is "payload 2", etc. Instead of printing, I want to be able to display a new dialog box (jquery dialog box) where the content will be displayed from the template. I don’t understand how this is done ..... I understand that views are used to store data for templates ... but not how could you embed a template in one that is generated by an action?

If you could point me to someone, that would be awesome!

Any advice, D

+4
source share
1 answer

The main approach for nesting is

  • Define nested routes (the main step, if you understand this, you're almost there)
  • Add {{outlet}} to the templates if you think something will be added to this view later

For example, we have 3 types of A, B, C and nesting is as follows

  A
 | _B
   | _C

Then templates A and B must have {{outlet}} , and C is the last one, it should not have {{outlet}}

Good example

+6
source

More articles:


All Articles