为什么我必须点击刷新才能让 js 滑块正确呈现？答案

【问题标题】：Why do I have to hit refresh to get js slider to render properly?为什么我必须点击刷新才能让 js 滑块正确呈现？
【发布时间】：2013-10-03 00:27:14
【问题描述】：

网站网址 http://ew.cayennecreative.com

在过去的几天里，我问了几个关于让 Foundation Orbit 滑块在 Ember 应用上运行的问题...对于在此处向关注 Ember 问题的任何人发送垃圾邮件，我深表歉意。

当我访问该站点时，我的问题是让 Foundation 初始化。我将此添加到application.js

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

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

我确定这与 Foundation 的初始化有关，但我不确定。

谢谢。

更新

我已经尝试在组件中初始化：

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();
  }
});

我已经尝试在视图和组件中进行初始化。我已经尝试将 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>

尝试使用和不使用“供应商/基金会”include_tag

【问题讨论】：

你在滥用 Ember。您不应该像在视图中那样通过 jQuery 进行 DOM 操作。我建议你仔细阅读所有Understanding Ember 部分。
谢谢，我会这样做的。同时，您对修复有什么建议吗？
对不起，没有。我对 Rails 不熟悉，Foundation 也不熟悉。

标签： javascript ember.js zurb-foundation

【解决方案1】：

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

【讨论】：

感谢您的回复。让我的库解析视图元素是什么意思？
我的意思是在didInsertElement 中执行类似的操作：this.$().foundation();。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

这是 cmets 对 this post 的跟进我已经删除了对 $(document).fundation() 的第一次调用，只让组件的 didInsertElement 挂钩中的一个调用，看看这个工作 jsbin。

希望对你有帮助。

【讨论】：

我正试图弄清楚是什么让您的 jsbin 与我的应用程序不同。我是一个 Rails 应用程序对 js 的初始化方式有什么影响吗？
@reknirt，它接缝取决于事物的加载方式，我猜因为它是一个 Rails 应用程序，rails 负责提供文件（html、js 等）。对吗？
对。我试过以各种方式加载文件。查看更新。
我剥离了 rails 后端。再次感谢您的帮助。
我想通了。这一直是一个基础问题。由于我的网站是响应式的，因此我没有在滑块上设置高度。但是 Foundation 有一个响应式选项，可以动态计算容器的宽度和高度，并动态地将这个容器插入到您的源代码中。但是，当您第一次加载页面时，存在一个将高度设置为 0 的错误。直到您调整浏览器的大小，高度计算才会触发。显然我不是第一个遇到这种情况的人。再次感谢您的所有帮助。你教会了我很多关于组件和视图的知识。