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 <li><a href="#login">Login</a></li>
so on click it takes me to that login div but when I hit refresh or go directly to the link with anchor I get Uncaught Error: No route matched the URL 'login'
Anybody has any ideas how I can accomplish this simple task in Ember? Thanks.
Update
Here's how my code looks like:
The navigation
<ul class="nav navbar-nav pull-right">
<li><a href="#login">Signup</a></li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
and somewhere below on the page I have
<section id="login">
-- some content
</section>
Based on alexspellers original JSFiddle, complete demo can be found here: http://jsfiddle.net/E3xPh/
In your Router
, add support for query params
App.Router.map ->
@resource 'index', path: '/', queryParams: ['anchor']
Using the Route
of your choice, setup a property for the anchor
query param in the setupController
method.
App.IndexRoute = Em.Route.extend
setupController: (controller, context, queryParams) ->
controller.set 'anchorLocation', queryParams.anchor
Finally in your Controller
make an observer for the anchorLocation
property.
App.IndexController = Em.ArrayController.extend
showAnchor: (->
$elem = $(@anchorLocation)
$scrollTo = $('body').scrollTop($elem.offset().top)
).observes 'anchorLocation'
Now you can use the following code in your templates to scroll to an anchor or point your browser to /#/?anchor=#login
for example.
{{#linkTo anchor='#login'}}Show login{{/linkTo}}
Possible answer based on what you wrote in the comments to the first answer. Hacked together something simple here.
http://jsbin.com/osEfokE/11
Clicking the Index link takes you to the IndexRoute and scrolls you to the login box, however the URL is not reflecting this change and typing #login will not work either.
App.ApplicationRoute = Ember.Route.extend({
events: {
goToLink: function(item, anchor) {
var $elem = $(anchor);
var $scrollTo = $('body').scrollTop($elem.offset().top);
this.transitionToRoute(item.route).then($scrollTo); //.transitionTo is depricated
}
}
});
Instead of using linkTo, you will use goToLink in your template when you want to scroll to an anchor.
<ul>
<li><a href="#/" {{action goToLink "index" "#login"}}>Index</a></li>
<li>{{#linkTo about}}About{{/linkTo}}</li>
<li>{{#linkTo contact}}Contact{{/linkTo}}</li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With