CODEWITHSUNDEEP
javascriptember.jsember-cli
copenndthagen
copenndthagen

Reputation: 50742

Ember implement list/details view

I am trying to implement a parent/child kind of view as below. i.e. a list is shown initially & on-click of any of the items, I want to be taken to the details view (passing the specific id, making a AJAX request and rendering the child template with the details)

Router.map(function() {
    this.route('pending-items', function() {
        this.route('pending-items-details', {
            path: 'details/:itemId'
        });
    });
});

My question is do I have to follow specific hiearchy for the folders while creating routes/controllers/templates given the above requirement for pending-items' & 'pending-items-details'

Also how do I render the child template with the details once I have the AJAX response ?

Upvotes: 0

Views: 86

Answers (1)

Garibaldy Cramer
Garibaldy Cramer

Reputation: 61

I like to do what you want to do in this way: 

Router.map(function() {
    this.route('pending-items', function() {
        this.route('details', {
            path: ':item_id'
        });
    });
});

using Ember-cli , you can do that, if you haven't created yet

  • ember generate template pending-items
  • ember generate template pending-items/details

this will generate for you this files in template folder

  • /pending-items.hbs
  • /pending-items/details.hbs

to render the template you only have to put the {{outlet}} helper into the parent template, example :

/peding-items.hbs

<h1>Content of the template</h1>
<div class= 'details'>
    {{outlet}}
</div>

/pending-items/details.hbs

<h3> Details of an item</h3>
<p>something here</p>

now run and enter in the browser url put : //localhost:4200/pending-items/1

Upvotes: 1

Related Questions