Ember.js anchor link

Question

I have a login box on homepage that I need to link to. The login box has id=\"login\" in html and I have a link to it like this

Answer 1

The problem is that Ember used the hash part in the URL to store the current state of your application. Spontaneously i see two possible solutions.

1 - *Don't let Ember use the hash part of your URLs.* Therefore use the HTML5 history location implementation of Ember. This will result in URLs like yourdomain.com/users/1/ without #.

App.Router.reopen({
  location: 'history'
});

2 - Don't use this technique. Instead use jQuery to do the scrolling to the relevant part. This could look like this:

  
Signup
 
  
{{#linkTo 'about'}}About{{/linkTo}}

And in the corresponding view:

App.YourView = Ember.View.extend({
  jumpToLogin : function(){
    $('html, body').animate({
        scrollTop: $("#login").offset().top
    }, 2000);
  }
});

This may seem a lot of code for this small feature, but i guess this is a nicer user experience right? Actually you can improve this approach by extracting this logic into a mixin, so you don't have to repeat it over and over:

App.ScrollToMixin = Ember.Mixin.create({
  scrollDuration : 2000, //default
  scrollTo : function(selector){
    $('html, body').animate({
        scrollTop: $(selector).offset().top
    }, this.get("scrollDuration");
  )
});
// mix it into your View
App.YourView = Ember.View.extend(App.ScrollToMixin, {});

And use it in your template:

  
Signup
 
  
{{#linkTo 'about'}}About{{/linkTo}}

PS: I haven't tested the code with the mixin. I am not absolutely sure wether the String "login" gets passed to the action handler exactly like that. So you would have to test :-)