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

问题描述

我需要链接到主页上的登录框.登录框在 html 中有 id="login" 并且我有一个像这样的链接 <li><a href="#login">Login</a></li> 所以点击它会把我带到那个登录 div 但是当我点击刷新或直接转到带有锚点的链接时，我得到 未捕获的错误:没有与 URL 'login' 匹配的路由

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'

有人知道我如何在 Ember 中完成这个简单的任务吗?谢谢.

Anybody has any ideas how I can accomplish this simple task in Ember? Thanks.

更新

我的代码如下所示:

导航

 <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

根据查询参数方法更新答案(截至 2013 年 12 月 21 日的当前特色标志)

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

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/

在您的 Router 中，添加对查询参数的支持

In your Router, add support for query params

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

使用您选择的Route，在setupController 方法中为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

最后在您的 Controller 中为 anchorLocation 属性创建一个观察者.

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'

现在，您可以在模板中使用以下代码滚动到锚点或将浏览器指向 /#/?anchor=#login 例如.

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

单击 Index 链接会将您带到 IndexRoute 并将您滚动到登录框，但是 URL 并未反映此更改，并且输入 #login 也不起作用.

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

当您想要滚动到锚点时，您将在模板中使用 goToLink，而不是使用 linkTo.

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屋！