Javascript Ember.js锚定链接

我有一个登录框在主页上，我需要链接到。登录框有html格式的

id=“login

”，我有一个这样的链接

，所以点击它会将我带到该登录div，但当我点击刷新或直接使用锚链接时，我会得到

未捕获错误：没有与URL“login”匹配的路由。

有人知道我如何在余烬完成这个简单的任务吗？谢谢

更新

下面是我的代码的样子：

导航

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

{{{linkTo'about'}}关于{{/linkTo}

在页面下面的某个地方

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

--一些内容

问题在于，Ember使用URL中的哈希部分来存储应用程序的当前状态。我自然而然地看到了两种可能的解决办法

1-*不要让Ember使用URL的哈希部分。*因此，请使用Ember的HTML5历史记录。这将导致类似于

yourdomain.com/users/1/

的URL，而不包含

2-不要使用此技巧。而是使用jQuery滚动到相关部分。这可能是这样的：

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

对于这个小功能来说，这似乎有很多代码，但我想这是一个更好的用户体验，对吗实际上，您可以通过将此逻辑提取到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>

注册
{{{linkTo'about'}}关于{{/linkTo}

PS:我还没有用mixin测试代码。我不确定字符串“login”是否会像那样传递给操作处理程序。因此，您必须测试：-）

查询参数 基于查询参数方法的更新答案（截至2013年12月21日，当前为特色标志） 基于原始的JSFIDLE，完整的演示可以在这里找到：

在

路由器中

，添加对查询参数的支持

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

使用您选择的

Route

，在

setupController

方法中为

anchor

query参数设置一个属性

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

最后，在

控制器中

观察

锚定位置

属性

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

现在，您可以在模板中使用以下代码滚动到定位点，或将浏览器指向

/#/？anchor=#login

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

简单行动法 可能的答案基于您在第一个答案的评论中所写的内容。在这里拼凑了一些简单的东西

单击索引链接会将您带到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>

{{{linkTo about}}关于{{/linkTo}
{{{linkTo contact}}contact{{/linkTo}

我用克洛维回答中的简单行动方法在余烬中实现了这一点

由于Ember改变了它的API，我不得不稍微改变一下kroovys的方法

两件事发生了变化：

不推荐使用Ember.Route中的事件，并将其替换为Ember.Controller中的操作

您必须使用transitionToRoute，而不是transitionTo

以下是我如何让它在Ember 1.7.0版中工作的

余烬车把模板新建.hbs

{{!-- Navigation --}}
<ul>
 <li {{action 'goToLink' "new" "#part1"}}>Part 1</li>
 <li {{action 'goToLink' "new" "#part2"}}>Part 2</li>
</ul>

{{!-- content --}}
<div id="part1" class="row">...</div>
<div id="part2" class="row">...</div>

App.NewController = Ember.ArrayController.extend({

 actions: {

    goToLink: function(item, anchor) {
        console.log('NewController > goToLink');
        var $elem = $(anchor);
        var $scrollTo = $('body').scrollTop($elem.offset().top);

        this.transitionToRoute(item.route).then( $scrollTo);
    }
}
});

---

我使用了一个组件，它还可以通过一个操作扩展以支持查询参数

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

是

#我的id

编辑

---

这里有一个执行此操作的ember cli插件

我的问题是，如果我从另一个页面单击目标链接，它将转到目标，但不会向下滚动到页面的正确部分。几个小时后，我的解决方案如下：

注意：我使用的是

ember cli

，以及

embody

和

ember 1.8

我的

导航栏中的链接

（在

应用程序.徽标中

）

然后，如果我已经在页面上，我只需向上滚动。如果我还没有在页面上，那么我将使用查询参数

concept=true

应用程序控制器中的
操作

scrollToConcept: function() {
  Ember.$(document).ready(
    Ember.$('html, body').animate({
        scrollTop: Ember.$("#concept").offset().top
    }, 750)
  )
},

 //allow clicking of link with specific id to go to that part of page
jumpToConcept : function(){
  if (this.get('currentPath') === 'index') {
    this.send('scrollToConcept');
  } else {
    this.transitionToRoute('index', { queryParams: {concept: true}});
  }
}

在
索引控制器中
I然后添加
概念查询参数

export default Ember.Controller.extend(

  queryParams: ['concept'],
  concept: null
}

然后，我在
索引视图
（我刚才访问的页面）中添加了一个
scrollToConcept
事件，该事件侦听页面加载并检查
概念查询参数
。如果
concept=true
I，则滚动至页面的概念部分

索引视图

scrollToConcept: function() {
    if (this.controller.get('concept') === 'true') {
        Ember.$('html, body').animate({
        scrollTop: Ember.$("#concept").offset().top
    }, 750);
    }
}.on('didInsertElement')

然后，对于普通的
索引链接
，我添加了一个设置
concept=null
的操作，这样
概念查询参数就不会显示在url中

导航栏中的链接

a click=goToIndex
  h3 id={logoClass} Happy Dining

然后在
应用程序控制器中
我进入
索引路径
，将
概念查询参数
设置为null（因此它不会显示在url中），并滚动到顶部（以防它在页面上处于较低位置）

希望以后能帮助大家
 以前大多数答案的问题是，如果在单击带有“href hash/fragment/id”的“链接”时路由没有改变，那么ember路由器将不会触发执行以前大多数解决方案所需的钩子

这在具有多个“标题”的页面中很明显，您希望允许用户从“导航/索引或链接列表”跳转到页面的相关部分（如服务条款或关于页面）

在这些情况下，ember要求您“选择完全转换”，这样即使路由没有改变，路由器也会触发它的挂钩
export default Ember.Controller.extend(

  queryParams: ['concept'],
  concept: null
}

scrollToConcept: function() {
    if (this.controller.get('concept') === 'true') {
        Ember.$('html, body').animate({
        scrollTop: Ember.$("#concept").offset().top
    }, 750);
    }
}.on('didInsertElement')

a click=goToIndex
  h3 id={logoClass} Happy Dining

actions: {
 goToIndex: function() {
  this.transitionToRoute('index', { queryParams: {concept: null}});
  Ember.$(window).scrollTop(0);
 }
}

  this.route('about', {
    queryParams: ['anchor']
  });

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    anchor: {
      refreshModel: true
    }
  },
  model: function(params) {
    var aboutController = this.controllerFor('about');
    aboutController.set('anchorLocation', params.anchor);
  }
});

import Ember from "ember";
export default Ember.Controller.extend({
  queryParams: ['anchor'],
  anchor: '',
  showAnchor: function() {
    var _this = this;
    Ember.run.schedule('afterRender', function scrollToAnchor(){
      var elem = Ember.$(_this.anchorLocation);
      elem.get(0).scrollIntoView(true);
    });
  }.observes('anchorLocation'),
});

          <ul>
            <li>
              {{#link-to "about" (query-params anchor='#contact')}}Contact{{/link-to}}
            </li>
            <li>
              {{#link-to "about" (query-params anchor='#support')}}Support{{/link-to}}
            </li>
            <li>
              {{#link-to "about" (query-params anchor='#team')}}Team{{/link-to}}
            </li>
          </ul>