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.
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!
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.
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: GitHub - buschtoens/ember-cli-scroll-to: {{link-to}} with animated #anchor power.
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.
