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

I got this working in Ember with the simple action approach from kroovy's answer.

Since Ember has changed its API I had to alter kroovys approach at little bit.

Two things have changed:

1. Events in an Ember.Route are deprecated and replaced by actions in Ember.Controller
2. instead of transitionTo you have to use transitionToRoute

Here is how I got it working in Ember Version 1.7.0

Ember Handlebars-Template new.hbs

{{!-- Navigation --}}
<ul>
 <li {{action 'goToLink' "new" "#part1"}}>Part 1</li>
 <li {{action 'goToLink' "new" "#part2"}}>Part 2</li>
</ul>

{{!-- content --}}
<div id="part1" class="row">...</div>
<div id="part2" class="row">...</div>

Ember App.Controller NewController.js

App.NewController = Ember.ArrayController.extend({

 actions: {

    goToLink: function(item, anchor) {
        console.log('NewController > goToLink');
        var $elem = $(anchor);
        var $scrollTo = $('body').scrollTop($elem.offset().top);

        this.transitionToRoute(item.route).then( $scrollTo);
    }
}
});