2017-04-10 66 views
0

正如標題所說,我有基金會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;

我希望有人可以來回答這個問題。我卡在這裏。

回答

0

由於沒有人回答我的問題和投票我的問題我自己找出解決方案。它可以幫助那些和我一樣有同樣問題的人。

問題是因爲基礎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()

感謝您對這個觀點題 !