Foundation 6 JS funktioniert nicht im Rails-Projekt

Question

Wie der Titel sagte, habe ich ein Problem mit der Foundation 6, damit es funktioniert. Ich suche überall und versuche jede mögliche Methode, um es zum Laufen zu bringen, aber ich habe es immer noch nicht geschafft.

Ich installiere Fundament-Schienen gem und folgen Sie den gegebenen Anweisungen richtig, aber immer noch nicht funktioniert. Css funktioniert gut das Problem ist, ich kann nicht die Registerkarte wechseln.

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"

Und unten ist mein 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;

Ich hoffe jemand mit Antwort für dieses Problem kommen kann. Ich bin hier geblieben.

Answer 1

Da niemand meine Frage beantworten und meine Frage abstimmen, finde ich die Lösung selbst heraus. Es könnte anderen Leuten da draußen helfen, die dasselbe Problem haben wie ich.

Das Problem ist, weil die Grundlage js Konflikt mit jquery und turbolink ist.

SOLUTION

neue Datei erstellen in app/assets/javascript/foundation.coffee

diese Codezeile hinzu:

setup = -> 
 

 
    $(document).foundation(); 
 

 
$ -> 
 

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

 
    setup() 
 

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

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

 
    setup()

Vielen Dank für Ansicht dieser Frage!