在Ember.js中使用HTML锚点 [英] Using HTML anchors in Ember.js

问题描述

在我的Ember应用程序中，我如何跳到我的Handlebars模板之一的HTML锚点？ 我创建了一个显示我想要完成的jsFiddle 。

背景

Ember通过应用程序导航的模型使用HTML锚点。

我有以下要求：当用户点击Handlebar linkTo 帮助器导航到新的路线目的地，浏览器应自动滚动到与新的路线目的地相关联的Handlebars模板内的锚点。

解决方案

使用 jquery 滚动到特定的部分。

 code> $（'html，body'）。animate（{
 scrollTop：$（a [name ='someAnchor']）。offset（）。top 
}）; 
  

请参阅这个SO答案相同。

在渲染视图后滚动到锚点覆盖 didInsertElement

请参阅此SO答案关于相同。

  App.LonglistView = Ember.View.extend（{
 didInsertElement：function ）$ {
 $（'html，body'）。animate（{
 scrollTop：$（a [name ='someAnchor'] ）.offset（）。top 
}）; 
} 
}）; 
  

这里是一个工作示例在jsfiddle（我没有添加任何数据模型为了清楚）

编辑：你也可以使用非jquery执行滚动的方式

  document.getElementsByTagName（'a'）[name ='someAnchor']。scrollIntoView（）
  

jsfiddle示例。

In my Ember application, how can I jump to an HTML anchor inside one of my Handlebars templates? I created a jsFiddle that shows what I want to accomplish.

Background
Ember's model of navigation through an application uses HTML anchors.

I have the following requirement: when a user clicks on a Handlebar linkTo helper to navigate to a new route destination, the browser should automatically scroll to an anchor inside the Handlebars template associated to that new route destination.

解决方案

Use jquery to scroll to a particular section.

$('html,body').animate({
    scrollTop: $("a[name='someAnchor']").offset().top
});

Refer this SO answer regarding the same.

To scroll to the anchor after the view is rendered override the didInsertElement in your definition for your route's View.

Refer this SO answer regarding the same.

App.LonglistView = Ember.View.extend({
    didInsertElement: function() {
        // Place the scroll to anchor code here.
        $('html,body').animate({
            scrollTop: $("a[name='someAnchor']").offset().top
        });
     }
});

Here is a working example in jsfiddle ( I have not added any data models for clarity )

EDIT: You could also use non-jquery way to do the scrolling

document.getElementsByTagName('a')[name='someAnchor'].scrollIntoView()

The jsfiddle example for the same.

这篇关于在Ember.js中使用HTML锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！