0

我正在运行 Rails 版本 5.2.4 这是我在 Ruby on Rails 中的观点的相关部分

      <div class="two fields">

            <div class="field">
                <label>Start date and time</label>
                <div class="ui calendar" id="standard_calendar">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" placeholder="Date/Time">
                    </div>
                </div>
            </div>

            <div class="field">
            <label>End time</label>
                <div class="ui calendar" id="time_calendar">
                    <div class="ui input left icon">
                        <i class="time icon"></i>
                        <input type="text" placeholder="Time">
                    </div>
                </div>
            </div>
        </div>

我将以下代码放在我的视图下方

<script>
console.log("Before scripts run")
$('#standard_calendar').calendar();
$('#time_calendar').calendar({type: 'time'});
console.log("After scripts run")
</script>

为了确保代码运行，我放置了一个 console.log，它运行良好。但是，当我尝试运行这两个 jquery 脚本时，它首先停止并说，

$(...).calendar is not a function

我已经安装了 gem'fomantic-ui-sass'和'jquery-rails'，它们都在工作（至少 fomantic 的 css 是）。我也将它们添加到 application.js 文件夹中，如下所示：

//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Loads all Semantic javascripts
//= require semantic-ui
// Load jquery
// = require jquery
// = require jquery_ujs

我的app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <%= favicon_link_tag 'spring-cleaners-logos/profile.png' %>
    <title>Spring Cleaners - <%= yield(:title) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="ui secondary  menu">
      <a class="item" href="/">
        <%= image_tag 'spring-cleaners-logos/profile.png', alt: 'Logo', class: 'image' %>
        Spring Cleaners
      </a>
      <div class="right menu">
        <a class="item">
          <i class="envelope icon"></i>
          Messages
        </a>
        <a class="item">
          <i class="user icon"></i>
          My Account
        </a>
        <a class="ui item" href="/logout">
          Logout
        </a>
      </div>
    </div>

    <h1><%= yield(:title) %><h1>

    <%= yield %>

  </body>
</html>

为什么它不起作用？我该如何解决？

4

1 回答 1

1

您的application.js.

  1. 以下行使用// =（注意空格）而不是//=. Rails 指南The Asset Pipeline-2.4 Manifest Files and Directives明确规定要使用//=。

    // = require jquery
// = require jquery_ujs

  2. 如果 Fomantic-UI 依赖 jQuery 存在，你应该在加载 jQuery 后要求它。否则它会尝试将自己注册为 jQuery 扩展或使用 jQuery 方法而不加载 jQuery。

    这意味着移动：

    // Loads all Semantic javascripts
//= require semantic-ui

    以下：

    // Load jquery
//= require jquery
//= require jquery_ujs
于 2020-04-13T21:06:36.673 回答