Ember.js锚链接

Question

我在主页上有一个我需要链接的登录框.登录框有id="login"在HTML和我有一个链接,像这样<li><a href="#login">Login</a></li>等单击它带我到登录股利但是当我打刷新或直接进入该链接的锚,我得到Uncaught Error: No route matched the URL 'login'

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

更新

这是我的代码的样子:

导航

 <ul class="nav navbar-nav pull-right">
  <li><a href="#login">Signup</a></li> 
  <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
 </ul>

在我的页面下面的某个地方

<section id="login">
 -- some content
</section>

Answer 1

查询参数

基于Query Params方法的更新答案(截至2013年12月21日的当前特色标志)

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

在你的Router,添加对查询参数的支持

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

使用Route您选择的,anchor在setupController方法中为查询参数设置属性.

App.IndexRoute = Em.Route.extend
  setupController: (controller, context, queryParams) ->
    controller.set 'anchorLocation', queryParams.anchor

最后在你Controller的anchorLocation物业观察员.

App.IndexController = Em.ArrayController.extend
  showAnchor: (->
    $elem = $(@anchorLocation)
    $scrollTo = $('body').scrollTop($elem.offset().top)
  ).observes 'anchorLocation'

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

{{#linkTo anchor='#login'}}Show login{{/linkTo}}

简单的行动方法

可能的答案基于您在第一个答案的评论中写的内容.在这里把简单的东西搞得简单.

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

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

<ul>
  <li><a href="#/" {{action goToLink "index" "#login"}}>Index</a></li>
  <li>{{#linkTo about}}About{{/linkTo}}</li>
  <li>{{#linkTo contact}}Contact{{/linkTo}}</li>
</ul>

Answer 2

问题是Ember使用URL中的哈希部分来存储应用程序的当前状态.我自发地看到两种可能的解决方案.

1 -*不要让Ember使用您的URL的哈希部分.*因此使用Ember 的HTML5历史位置实现.这将导致像yourdomain.com/users/1/没有的URL #.

App.Router.reopen({
  location: 'history'
});

2 - 不要使用这种技术.而是使用jQuery滚动到相关部分.这看起来像这样:

<ul class="nav navbar-nav pull-right">
  <li><a {{action jumpToLogin}}>Signup</a></li> 
  <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>

并在相应的视图中:

App.YourView = Ember.View.extend({
  jumpToLogin : function(){
    $('html, body').animate({
        scrollTop: $("#login").offset().top
    }, 2000);
  }
});

对于这个小功能来说,这似乎有很多代码,但我想这是一个更好的用户体验吧？实际上,您可以通过将此逻辑提取到mixin中来改进此方法,因此您无需反复重复:

App.ScrollToMixin = Ember.Mixin.create({
  scrollDuration : 2000, //default
  scrollTo : function(selector){
    $('html, body').animate({
        scrollTop: $(selector).offset().top
    }, this.get("scrollDuration");
  )
});
// mix it into your View
App.YourView = Ember.View.extend(App.ScrollToMixin, {});

并在您的模板中使用它:

<ul class="nav navbar-nav pull-right">
  <li><a {{action scrollTo "login"}}>Signup</a></li> 
  <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>

PS:我没有用mixin测试代码.我并不完全确定String"login"会像那样传递给动作处理程序.所以你必须测试:-)

Answer 3

我使用了一个组件,它也可以通过动作扩展为支持查询参数.

var ScrollToComponent = Ember.Component.extend({
  tagName: 'a',
  anchor: '',

  scrollTo: function () {
    var anchor = this.get('anchor'),
      $el = Ember.$(anchor);

    if ($el) {
      Ember.$('body').scrollTop($el.offset().top);
    }
  }.on('click')
});

这是你如何使用它:

{{#scroll-to anchor=anchor}}Jump To Anchor{{/scroll-to}}

哪里anchor是#my-id.

编辑

这是一个ember-cli插件,可以执行此操作https://www.npmjs.com/package/ember-scroll-to