问题描述：

正如标题所说，我有基金会6的问题，让它工作。我到处搜索并尝试一切可能的方法来使其工作，但我仍然没有这样做。基金会6 JS不能在Rails项目中工作

我安装了基础导轨宝石，并按照正确的指示，但仍然无法正常工作。 Css工作正常的问题是我无法切换选项卡。

的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files 
 
// listed below. 
 
// 
 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
 
// 
 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
 
// compiled file. JavaScript code in this file should be added after the last require_* statement. 
 
// 
 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
 
// about supported directives. 
 
// 
 
//= require jquery 
 
//= require jquery_ujs 
 
//= require foundation 
 
//= require turbolinks 
 
//= require react 
 
//= require react_ujs 
 
//= require components 
 
//= require_tree . 
 
$(document).foundation();

Application.scss.sass

/* 
 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
 
* listed below. 
 
* 
 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
 
* 
 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
 
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
 
* files in this directory. Styles in this file should be added after the last require_* statement. 
 
* It is generally better to create a new file per style scope. 
 
* 
 
*= require_tree . 
 
*= require_self 
 
*=require foundation_and_overrides 
 
@import "foundation_and_overrides"

而下面是我foundation_and_overide.scss

@charset 'utf-8'; 
 

 
@import 'settings'; 
 
@import 'foundation'; 
 

 

 
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package. 
 
// 
 
// @import 'motion-ui/motion-ui'; 
 

 
// We include everything by default. To slim your CSS, remove components you don't use. 
 

 
@include foundation-global-styles; 
 
@include foundation-grid; 
 
@include foundation-typography; 
 
@include foundation-button; 
 
@include foundation-forms; 
 
@include foundation-visibility-classes; 
 
@include foundation-float-classes; 
 
@include foundation-accordion; 
 
@include foundation-accordion-menu; 
 
@include foundation-badge; 
 
@include foundation-breadcrumbs; 
 
@include foundation-button-group; 
 
@include foundation-callout; 
 
@include foundation-card; 
 
@include foundation-close-button; 
 
@include foundation-drilldown-menu; 
 
@include foundation-dropdown; 
 
@include foundation-dropdown-menu; 
 
@include foundation-responsive-embed; 
 
@include foundation-label; 
 
@include foundation-media-object; 
 
@include foundation-menu; 
 
@include foundation-menu-icon; 
 
@include foundation-off-canvas; 
 
@include foundation-orbit; 
 
@include foundation-pagination; 
 
@include foundation-progress-bar; 
 
@include foundation-slider; 
 
@include foundation-sticky; 
 
@include foundation-reveal; 
 
@include foundation-switch; 
 
@include foundation-table; 
 
@include foundation-tabs; 
 
@include foundation-thumbnail; 
 
@include foundation-title-bar; 
 
@include foundation-tooltip; 
 
@include foundation-top-bar; 
 

 
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package. 
 
// 
 
// @include motion-ui-transitions; 
 
// @include motion-ui-animations;

我希望有人可以来回答这个问题。我卡在这里。

答

由于没有人回答我的问题和投票我的问题我自己找出解决方案。它可以帮助那些和我一样有同样问题的人。

问题是因为基础js与jquery和turbolink发生冲突。

SOLUTION

在创建新的应用程序文件/资产/ JavaScript的/ foundation.coffee

添加这行代码：

setup = -> 
 

 
    $(document).foundation(); 
 

 
$ -> 
 

 
    console.log "Loading page...! " + Date.now()%10000 
 

 
    setup() 
 

 
    document.addEventListener "turbolinks:load",() -> 
 

 
    console.log "turbolinks:load " + Date.now()%10000 
 

 
    setup()

感谢您对这个观点题！

基金会6 JS不能在Rails项目中工作

SOLUTION

相关推荐