jQuery Revolution Slider 停止使用 ember.js

Question

jQuery Revolution Slider 在您第一次加载网站时工作，但一旦您导航到另一条路线并返回到 home/index（滑块所在的位置），它就会破坏滑块。

<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 放在开头，但即使您刷新它也不会启动滑块，所以我想我必须将它留在 footer/bottom.

jsbin 预览（注意：它不显示图标，但它正在工作，（在末尾添加 /edit 以查看源代码）） http://jsbin.com/qeqideroze

Answer 1

实现此功能的最简单方法是将革命性的东西放入一个组件中：

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

要了解有关在 Ember 组件中包装 jQuery 插件的更多信息，请参阅 here

jQuery Revolution Slider 停止使用 ember.js

jQuery Revolution Slider stops working with ember.js

jquery

html

ember.js

revolution-slider