Handle incoming links with `#`

1

I have an ember site that also has a static blog that links back to the ember site. On the blog, I have some links that link back to internal anchors within the ember site;

<li><a href="http://test.com#home">Home</a></li>
<li><a href="http://test.com#about">About</a></li>
<li><a href="http://test.com#team">Team</a></li>

Ember treats these as routes. What is the best way to have ember treat these links as internal anchors that come in from an external site rather than as a route?

2 Likes
2

Check out https://github.com/emberjs/ember.js/issues/4098 for details. Unclear whether this is supported or not

1 Like
3

So far I’ve been looking at:

http://www.unknownerror.org/Problem/index/-1259968286/emberjs-anchor-link/

I’ve tried to use Query Params (w/ 1.6.0-beta.2) without success so I’ll go with handling anchors with actions.

So I’m also interested in knowing the official way to handle anchors within an ember app THE RIGHT WAY.

Any help is welcome.

1 Like
4

Regarding QP this may help: EmberConf 2014: Mr. Router embraces the Controller - Alex Matchneer - Speaker Deck

5

Thanks for the leads Thurston. We went with a query param solution for our needs.

6

There has been some great progress on Issue #4098 towards adding anchor support so we can “use anchor links properly”. Support for Bootstrap Scrollspy in Ember is also affected by this as it relies on anchor tags.

(As I said over on stackoverflow relating scrollspy)

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 this type of url. http://example.com/#/about#faq

I’m now happy to report that as of Ember 1.9.0, url’s with more than one hash(‘#’) are now basically supported.

Jay Phelps provided the fix on Issue #4098 and had this to say in Jan 2015:

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:

Something 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 keen for everyone to give this a try as I think proper anchor support for native html anchor tags is much better than having to convert intended anchor tags into query params just to get things working.

7

Although this is an old topic. i found myself still encounter this problem.

I believe for the majority using ember for the web locationType: ‘auto’ works fine, so this problem might not be relevant. However when using ember on hybrid mobile app (cordova/phonegap), as far as i am aware i am stuck with locationType: ‘hash’ and this is still an issue.

As far as scrollspy is concerned, has it occur to anybody it might be problem on the bootstrap side?

When I switch to locationType: ‘hash’ i get this error from scrollspy

Uncaught Error: Syntax error, unrecognized expression: #/posts

in the bootstrap it is doing this

   var $href = /^#./.test(href) && $(href)

see https://github.com/twbs/bootstrap/blob/master/js/scrollspy.js#L60

It appears to be testing if the href is a valid fragment the regular express think it is but $(href) generate error. I would think the problem at least with scrollspy it needs a better or maybe more robust way to test a valid fragment.

quickly change the regex to /^#\a/ (correct if i am wrong) scrollspy works fine for me. It is very interesting to me and I would probably submit an issue in the bootstrap side.

from http://www.w3.org/TR/html401/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

from rfc 3986 https://tools.ietf.org/html/rfc3986

fragment identifier component is indicated by the presence of a number sign (“#”) character and terminated by the end of the URI.

 fragment    = *( pchar / "/" / "?" )

so it appers the regex test need to at least satisfy both conditions

looks like it is a “won’t fix” see https://github.com/twbs/bootstrap/issues/14187