嘗試在Rails / Ember應用程序中使用Foundation的Orbit滑塊

Question

我有一個同時使用Ember和Foundation寶石的Rails應用程序。 直到我嘗試使用Foundation的Orbit滑塊（ http://foundation.zurb.com/docs/components/orbit.html）為止，所有操作都按預期進行。

Foundation gem在body標記中包含所有js文件，因此我需要的兩個文件（foundation.js和Foundation.orbit.js）都存在。

唯一的其他說明是將data-orbit附加到要滑動的任何元素上。 我的看起來像：

<ul data-orbit>
  <li><img src="/assets/ewabout_1.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_2.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_3.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_4.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_5.jpg" class="carousel-pics"></li>
</ul>

但是，當我加載頁面時，圖像只是堆疊在一起，就像該應用找不到javascript一樣。

我覺得這可能是一個余燼問題，但我不確定。 我需要添加到Ember View中嗎？

更新

將application.js更改為以下內容，並呈現滑塊，但將項目符號/按鈕等沿着頁面向下復制，導致網站崩潰。 但是至少它能使滑塊移動嗎？

//= require jquery
//= require jquery_ujs
//= require foundation
//= require handlebars
//= require ember
//= require_self
//= require ew
Ew = Ember.Application.create({
    ready: function () {
    setInterval(function() {
      $(document).foundation();
    }, 2000);
  }
});

Answer 1

但是，當我加載頁面時，圖像只是堆疊在一起，就像該應用找不到javascript一樣。

這是因為您需要在適當的時候初始化orbit插件，也就是說，當html標記已呈現到DOM中時，請閱讀如何做。

基本上，我要做的是創建一個Ember.Component （但是視圖也應該工作） ，然后將與軌道相關的標記直接放在組件的模板中，然后掛接到組件的didInsertElement中並初始化orbit插件：

軌道滑塊組件模板：

<script type="text/x-handlebars" id="components/orbit-slider">
    <ul data-orbit>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
      <li><img src="http://placehold.it/400x240/#c2c2c9" class="carousel-pics"></li>
    </ul>
</script>

軌道滑塊組件類：

App.OrbitSliderComponent = Ember.Component.extend({
  initOrbit: function() {
    $(document).foundation('orbit', {
      animation: 'fade',
      timer_speed: 10000,
      pause_on_hover: true,
      resume_on_mouseout: false,
      animation_speed: 500,
      stack_on_small: true,
      navigation_arrows: true,
      slide_number: true,
      container_class: 'orbit-container',
      stack_on_small_class: 'orbit-stack-on-small',
      next_class: 'orbit-next',
      prev_class: 'orbit-prev',
      timer_container_class: 'orbit-timer',
      timer_paused_class: 'paused',
      timer_progress_class: 'orbit-progress',
      slides_container_class: 'orbit-slides-container',
      bullets_container_class: 'orbit-bullets',
      bullets_active_class: 'active',
      slide_number_class: 'orbit-slide-number',
      caption_class: 'orbit-caption',
      active_slide_class: 'active',
      orbit_transition_class: 'orbit-transitioning',
      bullets: true,
      timer: true,
      variable_height: false,
      before_slide_change: function(){},
      after_slide_change: function(){}
    });
  }.on('didInsertElement')
});

模板中的用法

...
{{orbit-slider}}
...

如您所見，我已經使用了所有可能的配置可能性，只是為了確保它能起作用，但是您當然可以忽略它們或相應地對其進行更改。

這是一個工作示例： http : //jsbin.com/iciDiPI/2/edit

希望能幫助到你。