我如何将 scrollIt 与 Meteor 一起使用？

Question

如何将 scrollIt 与 Meteor 一起使用？我知道 jQuery 包含在 Meteor 中，但我是否还需要添加对 scrollIt 的引用，你不能用 Meteor 做对吗？

1) 包括jQuery和scrollIt.js

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>

2) 在每个部分上放置一个 data-scroll-index 属性

<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>

3) 在每个导航元素上放置相应的数据滚动导航属性

<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>

4) 对于指向部分的链接，放置一个 data-scroll-goto 属性

<a data-scroll-goto="0">Back to top</a>

5) 调用 scrollIt()

$(function(){
  $.scrollIt();
});

Answer 1

首先欢迎来到 Whosebug。其次，我在这里假设对流星有基本的了解。我将在你的流星项目中给出 html 模板代码和相关插件的 js 代码

按照您的用例的步骤

Step-1: 把你的scroll.js lib文件放在项目根目录下的client目录下

所以，它会像 <your-project-lib>/client/scrollit.js

您不需要在任何地方包含脚本标签。流星处理它。

Step-2：将html代码放入模板中，如下所示-

scrollTemplate.html

<template name="scrollTemplate.html">

 <div data-scroll-index="0">..content..</div>
 <div data-scroll-index="1">...</div>
 <div data-scroll-index="2">...</div>

 <~!-- Your whatever html code will go inside here -->
 <a data-scroll-nav="0">About</a>
 <a data-scroll-nav="1">Usage</a>
 <a data-scroll-nav="2">Options</a>
</template>

Step-3: 在模板 rendered 事件中初始化滚动

Template.scrollTemplate.rendered= function(){
   $.scrollIt();
}

模板的呈现事件类似于 ready 事件，但仅适用于模板内的 html。

我还没有测试过，但应该可以用

我如何将 scrollIt 与 Meteor 一起使用？

How do I use scrollIt with Meteor?

javascript

jquery

meteor