How to use #link-to in a top-level route AND nested routes

@jameshahn2 wrote:

I am using ember-concurrency to do a look-ahead search in my glossary app. Everything was working fine until I added nested routes like so:

Router.map(function() {
  this.route("home", { path: "/" });
  this.route("terms", function() {
    this.route("letter", { path: "/:letter" }, function() {
      this.route("term_id", { path: "/:term_id" });
    });
  });
});

Upon adding them, the search still worked in every route but every time I clicked a link I got:

WARNING: This link is in an inactive loading state because at least one of its models currently has a null/undefined value, or the provided route name is invalid.

At the time I was still using handlebars for the #link-to, which looked like this.

    <input type="text" oninput={{perform searchRepo value="target.value"}} class="border ml-10">

    {{#if searchRepo.isRunning}}
      {{loading-spinner}}
    {{/if}}

    <ul class="md:ml-30m my-5">
      {{#each (sort-by "term" searchRepo.lastSuccessful.value) as |term|}}
        {{#link-to "terms" term.letter.id}}{{term.term}}{{/link-to}}<br>
      {{/each}}
    </ul>

After several hours of Googling and debugging, I decided to try using angle brackets like this.

      {{#each (sort-by "term" searchRepo.lastSuccessful.value) as |term|}}
        <LinkTo @route="terms.letter.term_id" @model={{term}} class="text-blue-light text-xs leading-normal pt-4 no-underline">{{term.term}}</LinkTo><br>
      {{/each}}

It appeared to work and I was ready to call it a night feeling good about myself for fixing a problem all by myself … sadly, that feeling did not last long as I quickly realized the search worked in terms/:letter and terms/:letter/:term_id, but was broken in home.

After a couple more hours of Googling variations on but did not pass the models required for generating its dynamic segments and Cannot read property 'shouldSupercede' of undefined, I noticed an even more perplexing issue. When performing a search on the home route, console only threw this error the first time you searched in the route. After clearing the field and performing a second search in the home route, the search was successful but did not show-up on the screen.

I realize this might be pretty hard to visualize, so here is a 36 second video demonstrating the problem.

Check out this video: https://embed.vidyard.com/share/tzsMXWC1g7z98eWQJH2ZyC

I spent a bit longer trying current-when and finally had to shut it down in frustration.

Does anyone have an answer on how to make this work?

Posts: 1

Participants: 1

Read full topic