Question

我在过去几天询问了几个关于在Ember应用程序上使用Foundation Orbit滑块的问题......我为在这里关注Ember问题的任何人发出垃圾邮件而道歉。

我的问题是让我在访问网站时初始化基金会。我将其添加到application.js

$(document).ready(function() { 
  $(document).foundation(); 
});

并且滑块现在可以在刷新时正确加载。但是，当您输入网站的根目录并通过{{linkTo}}导航到带有滑块的页面时，滑块的图像会堆叠，就像它无法识别js一样。但只要您点击刷新并重新加载该特定页面 - /about/philosophy - 滑块就会运行。

我确定这与基金会的初始化有关，但我不确定。

谢谢。

更新

我尝试在组件中初始化：

Ew.OrbitSliderComponent = Ember.Component.extend({
  initOrbit: function() {
    $(document).foundation('orbit', {});
  }.on('didInsertElement')
});

在视图中初始化：

Ew.ConditionsView = Ember.View.extend({
  didInsertElement: function() {
    $('.hidden-content').hide();
    $('.toggle-bar').click(function (ev) {
      var t = ev.target

      $('#info' + $(this).attr('target')).toggle(500);

      return false;
    });
   this.$().foundation();
  }
});

我尝试在View和组件中初始化。我已经尝试将Foundation js目录添加到应用程序的头部。仍然没有。

尝试activate每次路线改变时都要触发功能。纳达。

Ew.ConditionsRoute = Ember.Route.extend({
  activate: function() {
    initOrbit: function() {
      $(document).foundation('orbit', {});
  }.on('didInsertElement')
}
});

钢轨

的application.js：

//= require jquery
//= require jquery_ujs
//= require handlebars
//= require ember
//= require_self
//= require ew
//= require foundation
Ew = Ember.Application.create();

//= require_tree .

application.html.erb

<head>
<script type="text/javascript" src="//use.typekit.net/fem3tnu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta charset="utf-8" />

<!-- Uncomment to make IE8 render like IE7 -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->

<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>

<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "vendor/foundation" %>
<%= javascript_include_tag "vendor/custom.modernizr" %>
<%= csrf_meta_tags %>
</head>

尝试使用和不使用“vendor / foundation”include_tag

Answer 1

不熟悉基金会，如果我不得不猜测我会说它只对DOM中已有的东西起作用。当您导航到包含{{linkTo}}的页面时，您不会重新加载整个页面，因此不会调用ready回调。如果您有任何依赖于Foundation的视图，则需要为它们定义didInsertElement，然后让您的库解析视图的元素。

Answer 2

我发现这是轨道的限制。您必须手动触发重新初始化的resize事件。这段代码为我修好了：

$(document).foundation('orbit', {})

setTimeout(function(){
   $(window).trigger('resize');        
}, 0);

setTimeout是防止扩展问题所必需的。

Answer 3

这是关于this post的评论的后续内容我删除了对$(document).fundation()的第一次调用，只让组件的didInsertElement挂钩中的那个调用，看看这个工作jsbin。

希望它有所帮助。

为什么我必须点击刷新才能使js滑块正确渲染？

3 个答案: