指向同一页面上不同部分的href在meteor.js中不起作用答案

【问题标题】：href to a different part on the same page not working in meteor.js指向同一页面上不同部分的href在meteor.js中不起作用
【发布时间】：2014-04-30 21:36:22
【问题描述】：

我在我的页眉中创建了一些引用页面特定部分的 href。我正在使用车把，href 在标题模板中，目的地在另一个模板中，这是我的代码的 sn-p：

在 header.html 中：

<li><a href="#PLATEAU"> PLATEAU </a> </li>

在 shop_page.html 中：

<h2> <span id="PLATEAU">PLATEAU</span></h2>

预期结果：当我单击标题中的超链接时，我希望转到带有目标 ID 的跨度。

实际结果：我看到我的路径更改为#PLATEAU，但我没有跳转到页面的正确部分。

附加信息：使用 Iron-router、bootstrap-3 包。铬合金。 MacBook Pro。流星版本 0.7.1.2

任何帮助表示赞赏！

干杯

【问题讨论】：

一切看起来都不错，但我怀疑它实际上与页面上的 CSS 有更多关系。通常，根据您在页面上定位内容的方式，您的 H 标签可能会有虚假的疯狂高度。元素的顶部很可能位于页面的顶部，但它的文本出现在正确的位置。尝试检查元素以确保所有内容都在正确的位置并具有正确的高度。
如果删除 Iron Router 包，行为会改变吗？
h标签就位。
移除铁路由器不是一种选择，因为没有它我的应用程序将无法呈现。

标签： javascript html twitter-bootstrap meteor

【解决方案1】：

正如Iron Router docs 中所说，查询字符串和哈希不用于路由。如果您需要路由，您可以使用actualPath/plateau 而不是actualPath#Plateau 并使用 Iron 路由器来呈现您的新内容。

但是，如果您想在此处使用 de 哈希，也许您可以这样做。我这样做是为了一个标签系统。

Handlebars.registerHelper('currentTab',function(page){
    return Session.get('activeTab') == page;
});

在 HTML 中：

{{#if currentTab 'PLATEAU'}}
    {{> PLATEAU}}
{{/if}}

<template name="PLATEAU">
<h2> <span id="PLATEAU">PLATEAU</span></h2>
</template>

再次在你的 js 中

Template.yourTemplate.events({
    'click .tabChange': function(e, t) {
        Session.set('activeTab', window.location.hash);
    }
});

我不再使用这个，所以这是一个未经测试的代码。 This answer 或许也能帮到你。强烈建议使用path/:activeTab 以获得更好的代码。

【讨论】：

我不想渲染新页面。我想导航到当前页面的不同部分。

【解决方案2】：

假设 shop-page.html 在您的 router.js 文件中称为“shop-page”，您可以执行以下操作：

# Create link to anchor
<li><a href="{{pathFor 'shop-page' hash='plateau'}}">PLATEAU</a></li>

# Set anchor
<h2><span id="plateau">PLATEAU</span></h2>

【讨论】：

【解决方案3】：

我也经历过。默认情况下，链接在 Metoer 中不起作用（我在某处读到它与 blaze 有关），#linking 虽然应该起作用，但需要路由到新页面的链接

【讨论】：

【解决方案4】：

这是在 Meteor 1.2.1（使用 Iron Router 1.0.12）上测试过的——应该也适用于更高版本（旧版本可能需要对提供的代码进行一两次更改）

首先，最好把标记改成

<li><a href="{{pathFor route='yourRouteName' hash='PLATEAU'}}">PLATEAU</a></li>

现在..你需要一个解决方法来解决这个持久的issue，这是我使用的：

Router.onAfterAction(function() {
  var hash = this.getParams().hash;
  Tracker.afterFlush(function() {
    if (hash && $("#"+hash).length) {
      // go to element
      Tracker.nonreactive(function() {
        window.location.hash = "";
        window.location.hash = "#"+hash;
      });
    }
  });
});

// go to element 之后的部分还有一些其他想法，例如：

  var scrollTop = $("#" + self.params.hash).offset().top;
  $("html,body").scrollTop(scrollTop);

或（要有动画）：

  var scrollTop = $("#" + self.params.hash).offset().top;
  $("html,body").animate({
    scrollTop: scrollTop
  });
}

参考资料（github上相关的iron router问题）：

Issue 248 - Issue 373 - Issue 1017 - Issue 1171

【讨论】：