2014-10-09 89 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();