0

网站网址 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')
}
});

导轨

应用程序.js：

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

//= require_tree .

应用程序.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

4

3 回答 3

3

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

于 2013-09-26T21:37:32.653 回答
2

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

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

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

这setTimeout是防止缩放问题所必需的。

于 2013-12-11T20:41:53.990 回答
1

这是对这篇文章的评论的跟进，我已经删除了第一个调用，$(document).fundation()只让组件didInsertElement钩子中的那个，看看这个工作的jsbin。

希望能帮助到你。

于 2013-09-26T23:54:30.733 回答