Fullpage Js 和 Meteor：从模板捕获事件答案

【问题标题】：FullpageJs and Meteor : Capture event from templateFullpage Js 和 Meteor：从模板捕获事件
【发布时间】：2015-03-26 11:07:11
【问题描述】：

我正在与 Meteor 中的 fullpage.js 作斗争。

当我在模板中添加按钮时，Template.templatename.events 函数不会在事件时触发。

例如：

模板 HTML (messages.html)

<template name="messages">
<ul>
  {{#each mess}}
      <li>{{ messContent}}</li>
  {{/each}}
 
  <button class="addMessage">Add Message!</button>
</ul>

</template>

模板 JavaScript (messages.js)

Template.messages.helpers({
  mess: function(){
    return Messages.find();
  }
});

Template.messages.events({
 'click .addMessage' : function(event){
   console.log("clicked")
 }
})

主 HTML

<head>
  <title>fulltest</title>
</head>

<body>
  {{> full}}
</body>

<template name="full">
<div id="fullpage">
  <div class="section active">
    <h1>First slide</h1>
  
    {{> messages}}
  
  </div>
  <div class="section">
    <h1>Second slide</h1>
   
  </div>
</div>
</template>

我的整页初始化：

Template.full.rendered = function(){
  $('#fullpage').fullpage();
}

如果我删除整页初始化，则会记录点击事件。在 Meteor 还是新手，我没能理解这里出了什么问题。

非常感谢所有帮助，乔里斯

【问题讨论】：

不知道它是否有帮助，但也许可以使用类似的东西：Template.full.onRendered(function(){ this.$("#fullpage").fullpage(); })
我已经尝试过了，但它并没有真正产生影响。不过还是谢谢你的建议

标签： meteor fullpage.js

【解决方案1】：

使用委托或使用verticalCentered:false 和scrollOverflow:false。

来自fullPage.js FAQs：

我的 javascript/jQuery 事件在使用 fullPage.js 时不再起作用

简短回答：如果您在 fullPage.js 初始化中使用诸如verticalCentered:true 或overflowScroll:true 之类的选项，那么您将不得不将您的选择器视为动态元素并使用委托。（通过使用诸如来自 jQuery 的东西）。另一种选择是将代码添加到 fullpage.js 的 afterRender 回调中

说明：如果您使用 fullPage.js 的 verticalCentered:true 或 overflowScroll:true 等选项，您的内容将被包裹在其他元素中，从而改变其在网站 DOM 结构中的位置。这样，您的内容将被视为“动态添加的内容”，并且大多数插件需要内容最初位于网站上才能执行其任务。使用 afterRender 回调初始化插件，fullPage.js 确保仅在 fullPage.js 停止更改站点的 DOM 结构时才初始化它们。

【讨论】：

太好了，现在我明白了。抱歉，我没有点击进入 wiki 和常见问题解答。我一直想知道如何在 afterRender 回调中推送整个 Meteor 客户端。感谢您的回答！