FullPage.js 및 Meteor

Question

기본 예제를 만드는 jsFiddle을 만들었습니다. 그것은 jsFiddle에서 잘 작동

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

, 내 유성 응용 프로그램에 넣어 내가 링크를 클릭 할 때 나는 그것을하지 스크롤 경우는 작동하지 않습니다. 여기

은 layout.html 내 유성 코드 :

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

를 서버 폴더에 lib 디렉토리 폴더

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 파일이 나는 철 - 라우터와 관련이 있다고 생각 하나?

건배

J

Answer 1

당신은 다음과 같이 정의 linkSelector를 제공하여 링크가 iron-router에 의해 캡처해야하는 결정할 수는 :

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

Answer 2

당신은 의 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>

당신은 두 세계의 최고를 얻을 것이다 이런 식으로 ...