CODEWITHSUNDEEP
ember.js
ouairz
ouairz

Reputation: 113

rendering templates with #link-to and dynamic segments

I have a simple app to show a list of clients, and a detail page for each specific client.

So basically, two URLs:

/clients/
/clients/:slug/

I've been having some trouble rendering the results from my Client model into a template, specifically when using the #link-to helper with dynamic segments.

I've found two methods for doing so, and while I can get them both to work, I don't know which one is the best and why.

Here is some (simplified) code from my app to explain.

// app/models/client.js
export default DS.Model.extend({
  name: DS.attr('string'),
  slug: DS.attr('string')
});

(my actual model is larger, but these are the only relevant fields)

and here are my routes:

// app/router.js
Router.map(function() {
  this.route('clients');
  this.route('client', { path: 'clients/:slug' });
});

NOTE: I didn't nest the routes, because I didn't want to use the {{outlet}} nested template feature.

Here is the route for Clients, where I retrieve my list of clients

// app/routes/clients.js
export default Route.extend({
  model: function() {
    return this.get('store').findAll('client'); // fetch all Clients
  }
});

Finally, here is the route to fetch info for a single Client:

// app/routes/client.js
export default Route.extend({
  model: function(params) {
    return this.store.query('client',  {
      filter: { slug: params.slug } // fetch one specific client, by slug
    });
  }
});

Everything works fine up to here, but my issue starts when displaying the model data in the templates.

There are two "ways", which one is correct??

OPTION A:

//app/templates/clients.hbs
// list all clients using #each
{{#each model as |client|}}
  {{#link-to "client" client}} // pass the "client" object to generate my dynamic routes
    {{client.name}}
  {{/link-to}}
{{/each}}

Clicking on any of the generated links will render the client detail template, client.hbs

//app/templates/client.hbs
<h1>Client - {{model.name}}</h1>

In this example, I can use model.name to render my model object. That's fine, until I refresh the page! Then the info returned by model.name is obliterated. Same thing if I try to visit the URL directly. I have to go back to /clients and click on the link again to see my client's name.

I then looked for another way to display my data, where the model information would survive a page reload.

OPTION B:

After much reading I found a suggestion to use the specific client slug/id as param for #link-to

// app/templates/clients.hbs
// list all clients using #each
{{#each model as |client|}}
  {{#link-to "client" client.slug}} // specifically use the actual slug/id, and not the object
    {{client.name}}
  {{/link-to}}
{{/each}}

But... by passing client.slug instead of client as parameter to #link-to, I can no longer use model.name to display my data. It simply returns nothing!

//app/templates/client.hbs
<h1>Client - {{model.name}}</h1> <-- model.name now returns nothing D:

However, using a loop DOES work for some reason:

//app/templates/client.hbs
{{#each model as |client|}}
  <h1>Client - {{client.name}}</h1> <-- using loop even though I only have one record :(
{{/each}}

So option B works, and the information is displayed correctly after a page reload, or a direct visit from the URL.

But I'm now using a loop to display a single record! And I can't find an alternative solution that actually works.

To summarize:

option A feels like the correct way, but reloading the page obliterates the data.

option B actually works and returns the data, but I have to use a loop to iterate through a single record, which doesn't feel idiomatic / efficient.

I'm extremely confused, any clarification would be greatly appreciated.

Thanks in advance!

Upvotes: 2

Views: 241

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

This is one of those fun 'magic' things that is supposed to simplify onboarding and make Ember seem easy - but really just caused the most confusion for what should be the most common use-case for the router.

At least it's in the guides now.

https://guides.emberjs.com/v2.12.0/routing/specifying-a-routes-model/#toc_dynamic-models

"Note: A route with a dynamic segment will always have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), and a model context is provided (second argument to link-to), then the hook is not executed. If an identifier (such as an id or slug) is provided instead then the model hook will be executed."

So, that's one thing...

But the other thing - is that you are getting back an array - because you are using query + filter - to create an array of records.

So, if you use queryRecord() - which is meant to get 1 record - then you'll get what you want. : )

I'd just add that {{outlets}} are cool. Here's how I normally do it - but t I can see that my route always loads all of the data this way... / which I normally want - but could see how in many cases - it wouldn't be desired.

And also - if you run into any more whacky params issues... investigate the underscore in the dynamic segment - because it's probably trolling you.

Upvotes: 1

Related Questions