Como usar Javascript em Ruby on Rails?

Acho que não estou a perceber como implementar o Javascript na minha aplicação rails. Meu entendimento foi que você joga seu Javascript no seu arquivo application.js e então você pode referenciar elementos no seu DOM usando jQuery a fim de fazer uma página web interativa.

acabei de verificar todo o meu código, e parece limpo (publicado abaixo no caso de estar errado). O meu pensamento é que posso estar a colocar o meu Javascript no lugar errado, ou estou a perder uma dependência algures? Encontrei outros posts para ser principalmente inútil para mim. Como fundir Javascript na minha aplicação?

Aplicação.js

function main() {
  $('.answers-box').hide();
  $('.qaa-box').on('click', function() {
    $(this).next().slideToggle(400);
  });
}
$(document).ready(main());

Page.galeria.erb

<div class="qaa-box">
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
  <p class="answers-box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </p>
</div>
Author: Styx, 2017-10-03
Source

4 answers

Encontraste isto?
onde colocar o seu JavaScript .

Onde colocar o seu JavaScript

Quer use o 'Rails asset pipeline' ou adicione uma marca <script> directamente a uma vista, terá de fazer uma escolha sobre onde colocar QUALQUER ficheiro de JavaScript local.

Temos uma escolha de três locais para um ficheiro de JavaScript local:

  • a pasta app/assets/javascripts
  • a pasta lib/assets/javascripts
  • a pasta vendor/assets/javascripts

Aqui estão as directrizes para seleccionar um local para os seus programas:

  • utilize app/assets/javascripts o JavaScript que criar para a sua aplicação.
  • Use lib/assets/javascripts para programas que são partilhados por muitas aplicações (mas use uma jóia se puder).
  • utilizar vendor/assets/javascripts em cópias de plugins jQuery, etc., de outros desenvolvedores.

No caso mais simples, quando todos os seus ficheiros JavaScript estão em a pasta app/assets/javascripts, não há mais nada que precises de fazer.

Adicione ficheiros JavaScript em qualquer outro lugar e terá de compreender como modificar um ficheiro Manifesto.

Manifestos Misteriosos
Existem dois tipos de ficheiros numa pasta de activos JavaScript:

  • ficheiros JavaScript comuns
  • arquivos manifestos
    Você também pode ter arquivos CoffeeScript e ERB que são variações emarquivos normais JavaScript.

os ficheiros Manifest têm o mesmo .a extensão de ficheiro js como ficheiros JavaScript normais. Os arquivos Manifest e os arquivos JavaScript comuns podem ser combinados em um único arquivo. Isso faz com que arquivos manifestos misteriosos , ou pelo menos não-óbvios.

O valor por omissão app/assets/javascripts / application.o ficheiro js é um manifest file. É um ficheiro manifesto porque contém directivas: 

//= require jquery  
//= require jquery_ujs  
//= require_tree .
As Directivas dizem aos Sprockets quais os ficheiros que devem ser combinados para construir uma um único script JavaScript. Cada arquivo que contém diretivas manifest se torna um único script JavaScript com o mesmo nome que o arquivo manifesto original. Assim, o ficheiro Manifesto app/assets/javascripts/application.js torna-se o script application.js.

Todos os programas na pasta app/assets/javascripts são adicionados automaticamente ao programa por omissão application.js quando o ficheiro Manifesto inclui o ficheiro por omissão / / = require_ Tree .Directiva.

Espero que isto ajude.
 3
Author: Iqlaas Ismail, 2017-10-04 00:52:48

Se está a usar os carris 5, pode ter de adicionar jQuery ao seu projecto, adicionando

gem 'jquery-rails'

No seu ficheiro Gemfile, bem como adicionar

//= jquery

Para o teu ficheiro app > assets > javascript > application.js.

Uma vez que os carris 5 usam Turbolinks, também pode ser necessário alterar o ouvinte

$(document).ready para $(document).on('turbolinks:load', function(main());

Adicionar um console.log à função main ajudará na depuração para ver se o evento está a ser disparado.

 0
Author: Andy, 2017-10-02 23:49:26

Esqueceu-se de adicionar os parêntesis após a função main() no documento.pronto 

$(document).ready(main();)

Além disso, tente o seguinte:

Adicione a joia jquery-rails ao seu ficheiro Gemfile (coloque isto no seu ficheiro gem): 

gem 'jquery-rails'
Então corre.bundle install Então escreva o seguinte no seu application.js: 
//= require jquery 
//= require jquery_ujs
 0
Author: the12, 2017-10-03 00:30:56

O $(document).ready() espera uma função, não o resultado da chamada de função. Em vez disso, estás a ligar main() antes DOMReady evento e passagem undefined para $(document).ready() função.

Deve ser assim: 

$(document).ready(main);
 0
Author: Styx, 2017-10-03 06:10:35