gpt4 book ai didi

javascript - Ember.js anchor 链接

转载 作者:行者123 更新时间:2023-12-02 23:29:20 25 4
gpt4 key购买 nike

我的主页上有一个登录框,我需要链接到该登录框。登录框有id="login ” 在 html 中,我有一个像这样 <li><a href="#login">Login</a></li> 的链接,所以单击它会将我带到该登录 div,但是当我点击刷新或直接转到带有 anchor 的链接时,我得到 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>

最佳答案

查询参数

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

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

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

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

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

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 或将浏览器指向 /#/?anchor=#login

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

简单的操作方法

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

http://jsbin.com/osEfokE/11

单击 Index 链接会将您带到 IndexRoute 并滚动到登录框,但是 URL 并未反射(reflect)此更改,并且键入 #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
}
}
});

当您想要滚动到 anchor 时,您将在模板中使用 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>

关于javascript - Ember.js anchor 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18445661/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com