Ember.js锚链接 [英] Ember.js anchor link

问题描述

我在首页上有一个我需要链接的登录框。登录框在html中有 id =login ，我有一个这样的链接< li>< a href =＃登录>登录< / a>< / li> 所以点击它需要我到该登录div，但是当我点击刷新或直接去锚点链接我得到未捕获错误：没有路由匹配URL登录

任何人有任何想法如何在Ember中完成这个简单的任务？谢谢。

更新

我的代码如下：

导航

 < ul class =nav navbar-nav pull-右> 
< li>< a href =＃login>注册< / a>< / li> 
< li> {{＃linkTo'about'}}关于{{/ linkTo}}< / li> 
< / ul> 
  

在页面上的某个地方我有

 < section id =login> 
  - 某些内容
< / section> 
  

解决方案

查询参数

根据查询参数方法（截至2013年12月21日的当前功能标志）更新了答案。

基于 alexspellers 原创JSFiddle，完整演示可以在这里找到： http：/ /jsfiddle.net/E3xPh/

在您的路由器中，添加对查询参数的支持

  App.Router.map  - > 
 @resource'index'，path：'/'，queryParams：['anchor'] 
  

使用您选择的路由，在锚点查询参数的属性> setupController 方法。

  App.IndexRoute = Em.Route.extend 
 setupController： （控制器，上下文，queryParams） - > 
 controller.set'anchorLocation'，queryParams.anchor 
  

最后在你的 Controller 为 anchorLocation 属性设置观察者。

 code> App.IndexController = Em.ArrayController.extend 
 showAnchor：（ - > 
 $ elem = $（@ anchorLocation）
 $ scrollTo = $（'body'）。 scrollTop（$ elem.offset（）。top）
）.observes'anchorLocation'
  

现在，您可以使用模板中的以下代码滚动到锚点或将浏览器指向 /＃/？anchor =＃login 。

  {{＃linkTo anchor ='＃login'}}显示登录{{/ linkTo}} 
  / pre> 
 
 
简单的行动方法
 
 
 
根据您在第一个答案的评论中写的内容，可能的答案。在这里一起搞砸了一些东西。
 
 
 
  http://jsbin.com/osEfokE/11  
 
 
 
点击索引链接可以转到IndexRoute并滚动到登录框，但是该URL不反映此更改，并且键入#login将不会
  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 
} 
} 
}）; 
  
而不是使用linkTo，当您想滚动到锚点时，您将在模板中使用goToLink。 
 < ul> 
< li>< a href =＃/{{action goToLinkindex#login}}>索引< / a>< / li> 
< li> {{linkto about}}关于{{/ linkTo}}< / li> 
< li> {{link to contact}}联系{{/ linkTo}}< / li> 
< / ul> 
  
 
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>

解决方案
Query Params

Updated answer based on the Query Params approach (currently featured flag as of Dec 21 2013)

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}}


Simple action approach

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>


                        
这篇关于Ember.js锚链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！