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.

http://jsbin.com/osefoke/11

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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -