Dynamic route code does nothing

Question

This is my twiddle to be more clear :

https://ember-twiddle.com/1454b9f4a64c197879d13f756401e561?openFiles=router.js%2C

I am trying to make a dynamic route. When I click a picture it should go to its detail page with different URL and different content. Like, when I click on the first pic it should go to localhost:4200/pic/1 or localhost:4200/1.

I'm trying to do the URL dynamic but I can't so far, when I click a picture it does nothing. What am I doing wrong?

Also, at the beginning I created routes and templates for every picture but with bigger data it won't be possible. How am I gonna handle this?

Answer 1

I got it working by:

• Not using Ember-data....I'm not sure how to make that work in Ember Twiddle. I just used a plain array of objects.
• I passed in the model to the route in the link-to

Here is what the template looked like with the pic model passed to the route in the link-to:

{{outlet}}

{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}
     <img src={{pic.image}} width="300">
  {{/link-to}}</div>
{{/each}}

See my working twiddle here: https://ember-twiddle.com/4b2b6467199622ae740259622c76ba9b