jQuery Revolution 슬라이더가 ember.js에서 작동하지 않습니다.

Question

jQuery Revolution 슬라이더는 웹 사이트를 처음로드 할 때 작동하지만 다른 경로로 이동하여 홈/인덱스 (슬라이더가있는 위치)로 돌아 오면 슬라이더가 끊어집니다 .

<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을 퍼팅 시도했지만 그렇게 내가 바닥 글/하단에두고해야 할 것 같아요 새로 고칠 때조차 슬라이더를 시작하지 않습니다. http://jsbin.com/qeqideroze

Answer 1

이 작업을 얻을 수있는 가장 쉬운 방법은 당신의 혁명을 던져하는 것입니다

jsbin 미리보기 (이 아이콘이 표시되지 않습니다하지만() 소스를 볼 수 끝에 /edit을 추가, 작업 주) 구성 요소에 물건 :

는

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 마크 업은 구성 요소 템플릿 내에 있습니다. 엠버 구성 요소 내부에 jQuery 플러그인을 포장에 대한 자세한 내용은 데모를 here

작업

는 새로운 경로로 전환 할 때, 모든 요소가 이벤트 핸들러와 함께 파괴되기 때문에이 문제가 발생 here