2014-10-09 51 views
0

我似乎无法在Meteor代码中使用Flickerplate.js正确呈现幻灯片。我正在从非Meteor代码调整它。无法在流星页面上呈现闪烁幻灯片Page

我的幻灯片DIV模板具有下面的代码:

<template name="Slideshow"> 
     <div class="flicker-slideshow"> 
      <ul> 
       <li data-background="images/cover.jpg"> 
        <div class="flick-title">Welcome</div> 
        <div class="flick-sub-text">To our page</div> 
      </li> 

      <li data-background="images/profile.jpg"> 
       <div class="flick-title">Who are we?</div> 
       <div class="flick-sub-text">We are us</div> 
      </li> 

      <li data-background="images/friends.jpg"> 
       <div class="flick-title">Friends</div> 
       <div class="flick-sub-text">Our friends</div> 
      </li> 
     </ul> 
</div> 

而且我的javascript代码如下:

Template.Slideshow.rendered = function() { 
    $('.flicker-slideshow').flickerplate({ 
     arrows: true, 
     arrows_constraint: false, 
     auto_flick: true, 
     auto_flick_delay: 10, 
     block_text: true, 
     dot_alignment: 'center', 
     dot_navigation: true, 
     flick_animation: 'transition-slide', 
     flick_position: 1, 
     theme: 'light' 
     }); 
} 

我听到报告说浏览器的控制台上的错误这个:

Exception from Tracker afterFlush function: undefined is not a function 
TypeError: undefined is not a function 
    at Template.Slideshow.rendered (http://localhost:3000/client/views/slideshow.js?330e430ab7dab250766bdd68b706ee963571dc87:2:29) 
    at null.<anonymous> (http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:2924:21) 
    at http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:1720:14 
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:2029:12) 
    at http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:1719:15 
    at Tracker.flush (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:438:11) 
+0

听起来像flickerplate是未定义的 - 你是如何将它包含在你的项目中的? – stubailo 2014-10-09 16:37:36

+1

另外,尝试使用'this。$'而不是'$',那么它只会在模板内搜索。 – stubailo 2014-10-09 16:38:24

+0

我刚将它添加到兼容性文件夹。 – mesosteros 2014-10-10 08:55:09

回答

0

由于stubailo在评论中建议,我需要的只是将其添加到模板中。 所以:

this.$('.flicker-slideshow').flickerplate();