1

The jQuery Revolution Slider works when you first load the website but as soon as you navigate to another route and come back to the home/index (where the slider is) it breaks the slider.

<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>

I've tried putting the slider-start.js at the head but it doesn't start the slider even when you refresh so I guess I have to leave it at the footer/bottom.

jsbin preview (note: it doesn't show the icons but it's working, (add /edit at the end to view the source)) http://jsbin.com/qeqideroze

4

1 回答 1

2

让这个工作最简单的方法是将你的革命性东西放入一个组件中：

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 标记将在您的组件模板中。

工作演示在这里

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

于 2015-01-14T21:21:36.583 回答