section links with ember.js

Question

I'm trying to include the bootstrap scrollspy in my ember app.

The scrollspy needs href="#section1" to do it's work, which is obviously confusing the router. That is giving me javascript errors like Uncaught Error: No route matched the URL 'section1', and breaking the scrollspy I believe. The last element is always selected.

Has somebody else managed to get this going? Is there a way to tell the router not to worry about this view?

what [type of url](http://emberjs.com/guides/routing/specifying-the-location-api/) are you using? By default Ember uses hash (`#`), which will definitely collide with anchors used by scrollspy as you have already seen in the error message. — MilkyWayJoe, Apr 23 '13 at 20:55
I'm not using the history api. I would need to research which browsers support it and which don't (the later might be easier. Do you think it would be save to reopen the router and set location to none when the view is inserted and turn it on again when the view is removed? — Rudi, Apr 24 '13 at 07:04
I might be mistaken, but as far as I know you can't change they url type during the application execution — MilkyWayJoe, Apr 24 '13 at 15:09
Have you tried to use [hashbang (`#!`)](http://stackoverflow.com/questions/14929170/hashbang-urls-using-ember-js)? It could potentially work well in this scenario. — MilkyWayJoe, May 10 '13 at 13:49
Anyone had any luck with getting this working and could share some tips? — Evolve, Oct 13 '14 at 11:04
possible duplicate of [Ember.js anchor link](http://stackoverflow.com/questions/18445661/ember-js-anchor-link) — givanse, Nov 12 '14 at 05:09

score 1 · Answer 1 · answered Jul 31 '14 at 01:35

1

This is not an issue with ScrollSpy, it's an issue with Ember Router http://discuss.emberjs.com/t/handle-incoming-links-with/4839

Perhaps you can isolate the issue to confirm? Do a test with a regular old hash link in Ember.

answered Jul 31 '14 at 01:35

Elise Chant

5,048
3
29
36

Regarding anchor links jumping within an Ember page Jay Phelps said this on 24 Sept 2014: "I want to get this finished so everyone please hold me accountable and bug me if I don't have a PR very soon." ref: https://github.com/emberjs/ember.js/issues/4098#issuecomment-56635351 – Evolve Oct 01 '14 at 08:42

score 0 · Answer 2 · answered Apr 23 '13 at 10:57

0

You should be able to use data-target instead of href with scrollspy.

data-target="#section1"

answered Apr 23 '13 at 10:57

RyanHirsch

1,847
1
22
37

1

That didn't work for me, using data-target instead of href doesn't do anything – Rudi Apr 23 '13 at 14:20
If you put up a jsbin/jsfiddle I will take a look at it, that was just a guess from looking at the scrollspy source. – RyanHirsch Apr 23 '13 at 14:24

Evolve · Accepted Answer · 2015-01-31T23:33:44.403

"This is not an issue with ScrollSpy, it's an issue with Ember Router". --@elise-chant

The issue has been that at it's core Ember relies on hacking the hash ('#') in a url and using it for it's own purposes. There hasn't been support for urls like this - http://example.com/#/about#faq

@elise-chant's response lead me to the core issue and I'm now happy to report that as of Ember 1.9.0, url's with more than one hash ('#') are supported.

Jay Phelps provided the fix and most recently had this to say:

We can see that it [Fix #4098] landed in the stable v1.9.0 release.

There is not yet any code that will actually scroll the page to an id="anchor" for you, though. The changes made were to allow that sort of code to happen. I've talked with some of the core members about such an implementation and still plan to try and add it to core but in the meantime you can definitely use >=1.9.0 and add your own code to do so, which should be fairly straight forward for simple cases:

Somethine like this but totally untested:

didTransition: function () {   
 Ember.run.schedule('afterRender', this,
 function () {
     if (window.location.hash) {
       var el = document.getElementById(window.location.hash.substr(1));
       if (el) {
         el.scrollIntoView();
       }
     }   
   }); 
 }

As I find cycles to work on this I'll have a working example, but I suggest you plow ahead with your own if you can.

I'm personally keen for people to give this a try and report back here on how you go.

section links with ember.js

3 Answers3