Newbie needs help with Ember basics

1

Greetings, Ember community!

I hope that I’m allowed to ask for guidance here. If not, I’m very sorry. I’m a complete newbie in Ember, and I’m struggling to make the basic things work right now. I’m hoping to master its steep learning curve, but looks like guides and google aren’t enough for my girly brain. I will be extremely grateful for any help and advice on my dumb questions.

So onto my current problem. I have a very simple structure set up: user has a list of pet groups, each group has a list of pets. Clicking a pet link shows you a pet profile. My router looks like this:

Router.map(function() {
  this.route('register');
  this.route('login');
  this.route("pet", { path: "/beast/:pet_id" });
  this.route('petgroup', { path:'/usr/:user_id'}, function() {
    this.route('pets', { path:"/:petgroup_id" });
  });
 });

When I’m navigating from the app index to an individual page through the nested outlets, everything works fine. But every pet needs to be viewable directly without any connection to user and group. And when I’m trying to access a pet directly through url (like this: _http://localhost:4200/beast/#11:15_), Ember shows a white page and throws “Uncaught UnrecognizedURLError: /beast/” If I remove the “usr” part from the path and leave only “/:user_id”, the error is gone and app loads. But it loads petgroup template instead of the pet, and tries to find the provided id among group ids.

Could someone please help me to understand what I’m doing wrong?

Thank you!

2

You can’t use # in an ID unencoded because it is the fragment identifier:

2 Likes
3

Thank you very much for your help, I can’t express how much I’m grateful to you for pointing this out! I’m feeling even more dumb now as this is not a coding problem but just a generic knowledge about url structure. I just need any other field or make a computed property of Orient’s RIDs to get rid of that hash.

4

No problem, you could also just use the serialize hook in the router to serialize your url as you see fit (and make sure you deserialize the opposite in the model hook also)