FullPage.js和流星

Question

我已经创建了一个jsFiddle创建一个基本的例子。

http://jsfiddle.net/7PwsS/532/

它的jsfiddle的伟大工程，把它放在我的流星应用程序，当我点击链接它不工作，如果我滚动它。

这里是我的layout.html流星代码：在库文件夹

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

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

的script.js文件

<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> 

Routes.js文件服务器文件夹

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

它是奇怪的，我猜测与铁路由器有关吗？

干杯

Ĵ

Answer 1

可以决定通过提供定制linkSelector这样哪个环节应该由iron-router捕获：

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

Answer 2

，你应该使用的moveTo（）全页。 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>

这样，您将得到最好的两个世界......