FullPage.js 和 Meteor答案

【问题标题】：FullPage.js and MeteorFullPage.js 和 Meteor
【发布时间】：2015-05-13 22:48:05
【问题描述】：

我创建了一个 jsFiddle 创建一个基本示例。

它在 jsFiddle 上很好用，把它放在我的 Meteor 应用程序中，当我点击链接时它不起作用，如果我滚动它。

这是我的 layout.html 流星代码：

<template name="layout">
  {{> yield}}   
</template>


<template name="index">
<div id="fullpage">
 <div id="section0" class="section" data-anchor="firstPage">
    <div class="col-sm-12 text-center">
      <h1>fullPage.js</h1>
      <ul id="menu">
        <li data-menuanchor="firstPage">
          <a href="#secondPage">First slide</a>
        </li>
      </ul>
    </div>
    </div>
      <div id="section1" class="section" data-anchor="secondPage">
        <div class="col-sm-12 text-center">
          <h1>fullPage.js</h1>
            <ul id="menu">
              <li data-menuanchor="firstPage">
                <a href="#firstPage">First slide</a>
              </li>
            </ul>
        </div>
      </div>
    </div>
</template>

Lib 文件夹中的Routes.js 文件

Router.configure({
  layoutTemplate: 'layout'
});

Router.map(function () {
  this.route('index', {
    path: '/'
  });
});

服务器文件夹中的 Script.js 文件

Template.index.rendered = function () {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage'],
        menu: '#menu'
    });
};

很奇怪，我猜是不是和iron-router有关？

干杯

【问题讨论】：

关于如何使它与 Iron-router 一起工作的任何建议？

标签： javascript jquery meteor fullpage.js

【解决方案1】：

您应该使用 moveTo() fullPage.Js 函数，让您的熨斗设置简单... FullPage doc over here

并使用流星模板事件处理程序处理页面滚动，如下所示：

Template._header.events({
    "click .scroll-link": function(evt, tpl){
      var sNum = $(evt.currentTarget).data().section;
      //console.log('section number is: '+ sNum);
        evt.preventDefault();
        $.fn.fullpage.moveTo(sNum, 0);
    }
});

<template name="_header">
  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <div class="container">
          <a class="brand-logo " href="{{pathFor home}}">HOME</a>
          <ul id="menu" class="right">
            <li> <a class="scroll-link" data-section="1">first</a></li>
            <li> <a class="scroll-link" data-section="2">second</a></li>
            <li> <a class="scroll-link" data-section="3">third</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

这样你就可以两全其美了...

【讨论】：

【解决方案2】：

您可以通过提供这样的自定义linkSelector 来决定iron-router 应捕获哪些链接：

Router.configure({
   linkSelector: /* selector for iron-router-links */
});

【讨论】：