javascript – Ember.js锚链接

栏目: JavaScript · 发布时间: 6年前

内容简介:代码日志版权声明:翻译自:http://stackoverflow.com/questions/18445661/ember-js-anchor-link
我在主页上有一个我需要链接的登录框.登录框在html中有id =“login”,我有一个这样的链接,例如<li><a href =“#login”> Login</ a><

/ li>所以点击它需要我到该登录div,但当我点击刷新或直接去与链接的链接我得到未捕获的错误:没有路由匹配的URL“登录”

任何人都有任何想法如何在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>

查询参数

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

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

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

App.Router.map ->
  @resource 'index', path: '/', queryParams: ['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
        }
    }
});

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

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

代码日志版权声明:

翻译自:http://stackoverflow.com/questions/18445661/ember-js-anchor-link


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

快速傅里叶变换

快速傅里叶变换

K. R. Rao、D. N. Kim、J. J. Hwang / 万帅、杨付正 / 机械工业出版社 / 2013-3 / 98.00元

《国际信息工程先进技术译丛·快速傅里叶变换:算法与应用》深入浅出地阐述了快速傅里叶变换(FFT)的原理,系统地总结了各类FFT算法,并广泛精辟地介绍了FFT在视频和音频信号处理中的各种应用。《国际信息工程先进技术译丛·快速傅里叶变换:算法与应用》在阐述了离散傅里叶变换(DFT)的原理和性质之后,详细讨论了时域抽取(DIT)和频域抽取(DIF)的各类快速算法。论述了近似计算DFT的整数FFT、二维及......一起来看看 《快速傅里叶变换》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具