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?

Answer 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.

Answer 2

您应该能够使用数据目标而不是使用scrollspy的href。

data-target="#section1"

Answer 3

"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.