2017-04-10 17 views
0

タイトルとして、基盤6に問題があると言いました。私はどこでも検索し、それを有効にするためのあらゆる可能な方法を試していますが、私はまだそうしていません。Foundation 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と競合するためです。

setup = -> 
 

 
    $(document).foundation(); 
 

 
$ -> 
 

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

 
    setup() 
 

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

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

 
    setup()

ビューこのいただきありがとうございます:

SOLUTION

アプリで新しいファイルを作成/資産/ Javascriptを/ foundation.coffee

のコード行を追加します質問 !

関連する問題