Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题

Ruby on Rails 4: Trouble with adding Javascript files in Rails web application

本文关键字：Rails Javascript 添加 文件 遇到 问题 应用程序 on Web Ruby      更新时间：2023-09-26

我在将javascript添加到我的rails应用程序中时遇到问题。我已经将javascript直接添加到我的应用程序.html.erb文件中，它只能工作文件。下面是一个脚本：

//

Javascript//

$( "#accordion" ).accordion();

var availableTags = [
];
$( "#autocomplete" ).autocomplete({
    source: availableTags
});

$( "#button" ).button();
$( "#radioset" ).buttonset();

$( "#tabs" ).tabs();

$( "#dialog" ).dialog({
    autoOpen: false,
    width: 400,
    buttons: [
        {
            text: "Ok",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
    $( "#dialog" ).dialog( "open" );
    event.preventDefault();
});

$( "#datepicker" ).datepicker({
    inline: true
});

$( "#slider" ).slider({
    range: true,
    values: [ 17, 67 ]
});

$( "#progressbar" ).progressbar({
    value: 20
});

$( "#spinner" ).spinner();

$( "#menu" ).menu();

$( "#tooltip" ).tooltip();

$( "#selectmenu" ).selectmenu();

// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
    function() {
        $( this ).addClass( "ui-state-hover" );
    },
    function() {
        $( this ).removeClass( "ui-state-hover" );
    }
);

这在我的应用程序.html.erb 文件中包装<script>标签周围没有任何问题。一旦我创建了一个名为theme的文件.js并将其放入"/vendor/assets/javascripts"并更新了我的应用程序.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.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require theme

它停止工作。我也尝试将主题.js放在"应用程序/资产/javascripts"中，但它也没有用。

这是应用程序.html.erb文件的头部：

<!DOCTYPE html>
<html class="bootstrap-layout">
<head>
  <title>App</title>
  <!-- Material Design Icons  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Roboto Web Font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
  <%= javascript_include_tag 'https://code.jquery.com/jquery-2.2.3.js' %> 
  <%= javascript_include_tag 'https://code.jquery.com/ui/1.11.4/jquery-ui.js' %>
  <%= csrf_meta_tags %>
</head>

我确定这是我缺少的基本东西，我只是不知道它是什么。我还删除了涡轮链接，认为这可能是问题所在，但是删除它并没有做任何事情。

由于它不是一个库，而是一组自定义 js，您应该将其放回应用程序/资产/主题中.js您将其放在而不是供应商 js 文件夹中。 然后，您不必特别要求它，因为在应用程序中.js文件中，您有"require树"语句，该语句将自动包含资产/js文件夹中的所有文件。

此外，将所有这些包裹在

$( document ).ready(function() {
    all your js here...
});

可能是你的js在页面之前加载，现在你把它移到了资产管道中，此时浏览器还没有编译DOM，让你所有的js都坏了。

相关文章：