foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.65k stars 5.49k forks source link

Meteor zurb:foundation-sites 'Reveal' of undefined #8601

Closed hoscb closed 8 years ago

hoscb commented 8 years ago

Hi,

I have a bit of a problem when I try to use Reveal plugin from Foundation. I have followed closely to what was written on the Atmosphere Zurb Foundation page. When I run the code I encounter the following error.

TypeError: Cannot read property 'Reveal' of undefined
    at .<anonymous> (myReveal.js:6)
    at blaze.js:3331
    at Function.Template._withTemplateInstanceFunc (blaze.js:3677)
    at fireCallbacks (blaze.js:3327)
    at .<anonymous> (blaze.js:3420)
    at blaze.js:1773
    at Object.Blaze._withCurrentView (blaze.js:2204)
    at blaze.js:1772
    at Object.Tracker._runFlush (tracker.js:515)
    at onGlobalMessage (meteor.js:391)

I have exhausted all my resources trying to search for a solution. I'm quite new to Meteor so I would appreciate someone to point me to the right direction in solving this problem or even identify the cause. I recently upgraded my meteor to 1.3.1.

Both my template and js files resides in the import folder. The path is /import/ui/views/page2/

HTML Part (myReveal.html)

<template name="myReveal">
  <p><a data-open="myReveal">Click me for a modal</a></p>

  <div class="reveal" id="myReveal"  data-reveal>
    <h1>Awesome. I Have It.</h1>
    <p class="lead">Your couch. It is mine.</p>
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
    <button class="close-button" data-close aria-label="Close reveal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>

JavaScript part (myReveal.js)

import { Template } from 'meteor/templating';
import { Foundation } from 'meteor/zurb:foundation-sites';
import './myReveal.html';

Template.myReveal.onRendered(function () {
  this.myRevealInstance = new Foundation.Reveal($('#myReveal'));
});

Template.myReveal.onDestroyed(function () {
  let reveal = this.myRevealInstance;
  if (reveal) {
    reveal.destroy();
  }
});

Thank you!

hoscb commented 8 years ago

Problem solved by removing

import { Foundation } from 'meteor/zurb:foundation-sites';

hoscb commented 8 years ago

Just curious what should be the import definition of Foundation.