jQuery Revolution Slider перестает работать с ember.js

JQuery Revolution Slider работает, когда вы впервые загружаете веб-сайт, но как только вы перейдете на другой маршрут и вернетесь в дом/индекс (где ползунок), он разбивает ползунок ,jQuery Revolution Slider перестает работать с ember.js

<script type='text/x-handlebars' data-template-name='application'> 
      <nav class='navbar navbar-default navbar-fixed-top' role='navigation'> 
       <div class='container'> 
        <div class='navbar-header'> 
         <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'> 
       <span class='sr-only'>Toggle navigation</span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
       </button> 
       <a href='#'><img {{bind-attr src='logo'}} alt="logo" style='width: 120px;' /></a> 
        </div> 
        <div id='navbar' class='navbar-collapse collapse'> 
         <ul class='nav navbar-nav'> 
          {{#link-to 'index' tagName='li'}}<a>Home</a>{{/link-to}} 
          {{#link-to 'games' tagName='li'}}<a>Games</a>{{/link-to}} 
          {{#link-to 'about' tagName='li'}}<a>About Us</a>{{/link-to}} 
          {{#link-to 'contact' tagName='li'}}<a>Contact</a>{{/link-to}} 
         </ul> 
        </div> 
       </div> 
      </nav> 
      <div>{{outlet}}</div> 
      <footer class='container'> 
      <hr/> 
      </footer> 
     </script> 

     <script type='text/x-handlebars' data-template-name='index'> 
      <div class="tp-banner-container"> 
       <div class="tp-banner" > 
        <ul> 
        <!-- THE BOXSLIDE EFFECT EXAMPLES WITH LINK ON THE MAIN SLIDE EXAMPLE --> 

        <li data-transition="boxslide" data-slotamount="7"> 
         <img src="examples&source/images/darkblurbg.jpg"> 
         <div class="caption sft medium_grey" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div> 
         <div class="caption sfb medium_grey" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div> 
         <div class="caption lfr medium_grey" data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div> 
        </li> 
        <li data-transition="boxslide" data-slotamount="7"> 
         <img src="examples&source/images/darkblurbg.jpg"> 
         <div class="caption sft medium_grey" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div> 
         <div class="caption sfb medium_grey" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div> 
         <div class="caption lfr medium_grey" data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div> 
        </li> 
        </ul> 
       </div> 
      </div> 
     </script> 

     <script type="text/javascript" src="assets/slider-start.js"></script>

Я попытался положить slider-start.js на голове, но она не запускается ползунка, даже при обновлении, так что я думаю, я должен оставить его на колонтитул/снизу.

jsbin просмотр (примечание: он не показывает иконки, но он работает, (добавить /edit в конце, чтобы просмотреть исходный код)) http://jsbin.com/qeqideroze

источник

2015-01-14 Johhan Santana

Это происходит потому, что при переходе на новый маршрут, все элементы уничтожаются вместе с обработчиков событий. Поэтому, когда вы переходите обратно, он больше не инициализируется. Id предлагает найти чистый слайдер Ember и вырезать jQuery. – NicholasJohn16

нет ли обходного пути? как инициализировать все обработчики событий в этом маршруте/контроллере? –

вы можете бросить это в jsbin, pls? – Kalman

Самый простой способ получить эту работу, чтобы бросить вашу революцию вещи в компонент:

App.XRevolutionComponent = Ember.Component.extend({ 
    initRevolution: function(){ 

    $('.tp-banner').revolution({ 
     delay:9000, 
     startwidth:1170, 
     startheight:600, 
     startWithSlide:0, 

     fullScreenAlignForce:"off", 
     autoHeight:"off", 
     minHeight:"off", 
     // ... more properties ... 

    }); 

    }.on('didInsertElement') 
});

Ваш index шаблон будет выглядеть следующим образом:

<script type='text/x-handlebars' data-template-name='index'>    

     {{ x-revolution }} 

    </script>

, и ваша HTML-разметка будет внутри вашего шаблона компонента.

рабочий пример here

Чтобы узнать больше о оберточной JQuery плагин внутри компонента Ember см here

источник

2015-01-14 21:21:36 Kalman

wow !! Спасибо большое! <3 –

Рад, что работает для вас! :) – Kalman

Я видел это решение раньше для множества проблем, связанных с jQuery и DOM с Ember. Часть, которую я не понимаю, почему именно компонент ее исправляет. – Cameron

jQuery Revolution Slider перестает работать с ember.js

ответ

Смежные вопросы