One Pager with Ember


#1

Hello Ember Community

This is my first post, so please be gentle. :slight_smile:

Iam trying to create a onepager with Navigation and changing Routes. While Browsing the Web i noticed, that this Forum uses Component similar to the once i need.

For Example: On the Top right there is a Navigation with a start and end date. I use a classic navigation with names like: “profile, change password, hobbys”.

Also the url should chance based on the element who is looked at.

The Projekt iam working on uses Ember.

It would be very nice if you can help me solve this problem.

wishi


#2

Hi @wishi, I’ll try and give a general overview of some steps you can try. Feel free to ask follow up questions if you get stuck. I’d also highly recommend the Ember Guides for getting used to the basic Ember app structure and concepts like routing.

So… you said you wanted to have a navigation (presumably some sort of navbar) and a few routes. Typically you’d put your navbar in either a component or directly in the application template. I personally like to put things in route templates and then abstract to components when I feel it’s appropriate later, so maybe start there. First, define your basic navbar markup (branding, nav, etc). Your application template probably has an outlet tag in it, put the navbar above that.

Next you’d want to define a couple routes. For starters maybe try profile: ember g route profile to generate a new route. First look at the changes this made to app/router.js. You’ll see it added a new route called “profile”. One thing to note here is that the route’s “name” (in this case “profile”) is ALSO the route’s url fragment. You can change the URL fragment later by adding a path but I’ll save that for the guides.

It also generated a route file in /app/routes/profile.js and a template in app/templates/profile.hbs. Put some stuff in your template, maybe just a hello world message for now, and then save it. Now go back to your application template and in your nav put this: `{{#link-to ‘profile’}}Profile{{/link-to}}. This helper creates a link tag to the profile route you just defined using the route’s name. The link-to helper also automatically handles an “active” class on the “active” route so you can change the appearance of the active navbar link simply by adding navbar “active” styles.

Anyway, just repeat the route generation steps for the other routes and you have what you wanted: an app with several routes and a working navbar that correctly transitions between them.

Again, I’d read through the guides pretty well, and ask here if you get stuck on anything. Good luck!


#3

Hello dknutsen.

Thx for your answer, but it doesn’t help at all. I’am not interested in Ember Basics.

A “one pager” is a site where all elements are on the Same Page. you can reach every component just by scrolling down. While scrolling down the Navigation transform with it. Also the anchor in the url should change.

I think i found a solution in one of my companys products. but feel free to add a best practice solution. If the company solution is suitable for my problem, i will post a quick guide under this post.

Have a nice Day

wishi


#4

Ah, that makes more sense. A lot of people describe “single page applications” with unusual terminology so I thought that’s what you meant by one pager.

Using anchors is tricky in ember because of the way that routes work (it is a single page application after all). It seems that many people choose to use query params instead of anchors, but others have worked around this in clever ways. This addon is pretty old but I think the approach is good and clean so it might be worth a look: https://github.com/buschtoens/ember-cli-scroll-to

But maybe your company’s solution makes more sense for your use case. I haven’t ever run across anything that didn’t involve either hacking around the router somewhat or just using query params instead so I’d be curious to see what you land on.