javascript - Ember.js anchor link -
i have login box on homepage need link to. login box has id="login
" in html , have link <li><a href="#login">login</a></li>
on click takes me login div when hit refresh or go directly link anchor uncaught error: no route matched url 'login'
anybody has ideas how can accomplish simple task in ember? thanks.
update
here's how 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 page have
<section id="login"> -- content </section>
query params
updated answer based on query params approach (currently featured flag of dec 21 2013)
based on alexspellers original jsfiddle, complete demo can found here: http://jsfiddle.net/e3xph/
in router
, add support query params
app.router.map -> @resource 'index', path: '/', queryparams: ['anchor']
using route
of choice, setup property anchor
query param in setupcontroller
method.
app.indexroute = em.route.extend setupcontroller: (controller, context, queryparams) -> controller.set 'anchorlocation', queryparams.anchor
finally in controller
make observer anchorlocation
property.
app.indexcontroller = em.arraycontroller.extend showanchor: (-> $elem = $(@anchorlocation) $scrollto = $('body').scrolltop($elem.offset().top) ).observes 'anchorlocation'
now can use following code in templates scroll anchor or point browser /#/?anchor=#login
example.
{{#linkto anchor='#login'}}show login{{/linkto}}
simple action approach
possible answer based on wrote in comments first answer. hacked simple here.
clicking index link takes indexroute , scrolls login box, url not reflecting change , typing #login 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 depricated } } });
instead of using linkto, use gotolink in template when want scroll 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>
Comments
Post a Comment