基础5 Topbar在轨道上不能一直工作4 [英] Foundation 5 Topbar not working consistently in rails 4

查看:159
本文介绍了基础5 Topbar在轨道上不能一直工作4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在rails 4应用中使用了基础5。发送请求时,顶栏菜单工作正常。我可以悬停项目和嵌套项目没有问题。然后,我点击其中一个项目,其中有一个与之相关的link_to方法。有时它会给我正确的结果,我的菜单仍然是完美的,但其他时候,整个事情冻结。这也使得移动菜单的后退按钮消失。通过刷新或网址发送新请求后,菜单再次工作。



Rails在日志文件中没有看到任何问题。我的菜单在轨道之外工作正常。我想知道是否可能与我的link_to tag_helpers或我在应用程序中设置基础的方式有关?



这是一个快速概述JS如何路由为基础。 (他们在他们的文档上建议的配置)
views / layouts / application.html.erb:

 < head> ; 
< meta name =viewportcontent =width = device-width,initial-scale = 1.0/>
<%= stylesheet_link_tag应用程序%>
<%= javascript_include_tagvendor / modernizr%>
< / head>
< body>
<%= javascript_include_tagapplication%>
< / body>

assets / application.js:

  // = require jquery 
// = require jquery_ujs
// = require foundation
// = require turbolinks
// = require_tree。

$(document).foundation();

有其他人遇到这个问题吗?除了不使用基础5之外的任何好的解决方案?



感谢
Alex

解决方案

基金会已经知道Turbolinks的问题,您的问题可能是由于这个原因。



要解决这个问题,您可以禁用Turbolinks,看看顶栏仍然有问题。



这是一个简单的指南: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4



除此之外,如果你必须有Turbolinks,而Turbolinks是问题。您可以尝试添加jquery turbolinks,如下所示: https://github.com/kossnocorp/jquery.turbolinks



如果问题持续存在,下一步将是检查您导入JavaScript文件的顺序(这与Turbolinks / Foundation问题有关),而您可能会这样满足。 我没有一个确切的顺序让你放入,但是如果你搜索Turbolinks Foundation问题,你最终会陷入一些解决方案。这不一定是一个一定的解决方案,请指导您正确的方向。



更新:尝试此命令导入您的JavaScript资源。并引用来源

重要的是将所有的JavaScript都加载到标签内。 jQuery的包含顺序是很重要的 - 确保在加载jquery.turbolinks之前和之后jquery。在你的application.js中包含jquery-turbolinks.js和turbolinks.js之间的所有自定义js



  // app / assets / javascript / application.js 

// = require jquery
// = require jquery.turbolinks
// = require jquery_ujs

// = require基础
// =需要jwplayer / jwplayer.js
// =要求asset_videos

// =需要涡轮
看看亚历克斯·奥布斯的答案

/ a>在此页面上获取更多有用的信息。


I'm using foundation 5 in my rails 4 app. The topbar menu works fine when I send a request. I can hover the items and nested items no problems. Then, I click on one of the items, which has a link_to method associated to it. Sometimes it gives the proper result where my menu still works perfectly, but other times the whole thing freezes. This also makes the back button of the mobile menu disappear. Once I send a new request through the refresh or url, the menu works again.

Rails doesn't see any problem in the log file. My menu works fine outside of rails. I wonder if maybe it has to do with my link_to tag_helpers or the way I have set up foundation in my app?

Here is a quick overview on how the JS is routed for foundation. (The config they suggest on their docs) views/layouts/application.html.erb:

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <%= stylesheet_link_tag    "application" %>
 <%= javascript_include_tag "vendor/modernizr" %>
</head>   
<body>     
  <%= javascript_include_tag "application" %>     
</body>

assets/application.js:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(document).foundation();

Has anybody else encountered this problem? Any good solution other than not using foundation 5 out there?

Thanks Alex

解决方案

Foundation has known issues with Turbolinks, your issue may be due to that.

To troubleshoot that, you could disable Turbolinks and see if the top-bar still has issues.

Here's a simple guide: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .

Beyond that, if you must have Turbolinks, and Turbolinks is the issue. You can try adding jquery turbolinks as seen here: https://github.com/kossnocorp/jquery.turbolinks .

If the problem continues to persist, the next step would be to check the order you're importing the javascript files (this matters with these Turbolinks / Foundation issues) and you may be satisfied that way. I do not have an exact order for you to put them in, but if you search for "Turbolinks Foundation" issues you will eventually stumble onto some solutions. This is not necessarily a certain solution, but it'll guide you in the right direction.

Update: Try this order for importing your javascript assets. And, to quote the source:

Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.js

// app/assets/javascript/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs

//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos

//= require turbolinks

Note: Look at Alex Aube's answer on this page for additional useful information.

这篇关于基础5 Topbar在轨道上不能一直工作4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆