CODEWITHSUNDEEP
javascriptember.jsrouteshandlebars.jsember-router
Koala7
Koala7

Reputation: 1404

Ember Nested Routes and rendering models

I have an invoice application generator and i want to show the invoices with all his transactions in 2 different ways, at the moment i can only do it in 1 way ( Edit Link)

  1. On Edit link where i can see all my invoices and transactions together ( it s how it works now)
  2. On View link where i want to see only the specific Invoice information with his own transactions and not any of the other invoices and informations

I have reproduced my case here

This is the route code

App.Router.map(function(){ 
    this.resource('invoices', function(){
        this.resource('invoice', { path:'/:invoice_id' }, function(){
            this.route('edit'); 
        }); 
        this.route('create');
    });

});

The problem is that as long as i am inside the invoices resources i am sharing the invoices templates where everything is generated, but is there a way where i can see only my single invoice with his own transactions inside the invoices route? Is it achievable with the same Route Code? What's the best way to get this done? 

   <script type="text/x-handlebars" id="invoices">
    <div class="large-12 columns">
      {{#link-to "invoices.create"}} Add Invoice {{/link-to}}
    </div>
    <ul class="fatturas-listing">
      {{#each invoice in model}}
        <li>
          {{#link-to "invoice" invoice}}
            Edit {{invoice.title}}
          {{/link-to}}
        </li>
        <li>
          {{#link-to "invoice" invoice}}
            View {{invoice.title}}
          {{/link-to}}
        </li>
       {{else}}
        <li>no fatturas… :(
        </li>
      {{/each}}
    </ul>
    {{outlet}}
  </script>

Upvotes: 1

Views: 45

Answers (1)

jcbvm
jcbvm

Reputation: 1670

I don't get your 'edit' part. The problem you have right now is the outlet defined in the invoices template, all sub routes will be rendered in here, so you cannot show an invoice without its parent (invoices) content.

I think the most common way is to remove the outlet and show all invoices in the InvoicesIndex route. Clicking an invoice will then go to a single invoice (a new page without showing the invoices list from the InvoicesIndex route).

Upvotes: 1

Related Questions