javascript – Ember.js锚链接
栏目: JavaScript · 发布时间: 6年前
内容简介:代码日志版权声明:翻译自:http://stackoverflow.com/questions/18445661/ember-js-anchor-link
/ 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}}
简单的行动方法
根据您在第一个答案的评论中写的内容可能的答案.在这里一起搞砸了一些简单的东西
单击索引链接将转到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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Blog Design Solutions
Richard Rutter、Andy Budd、Simon Collison、Chris J Davis、Michael Heilemann、Phil Sherry、David Powers、John Oxton / friendsofED / 2006-2-16 / USD 39.99
Blogging has moved rapidly from being a craze to become a core feature of the Internetfrom individuals sharing their thoughts with the world via online diaries, through fans talking about their favori......一起来看看 《Blog Design Solutions》 这本书的介绍吧!