[RUBY] Rails 6 (standardmäßig mit Webpacker) implementiert die Sternebewertungsfunktion

Einführung

Da sich die Handhabung von JavaScript seit der Veröffentlichung von Ruby on Rails 6.0 im August 2019 geändert hat, möchte ich "jQuery Raty - Ein Sternebewertungs-Plugin" basierend auf den Änderungen (Stolperpunkten) einführen.

Umgebung

• Sprache (Ruby 2.6.5)
• Rahmen (Rails 6.0.3.3)

Referenz

• https://qiita.com/yuki_0920/items/a966d9fa2bdb621f805d
• https://github.com/wbotelhos/raty
• http://itref.fc2web.com/javascript/jquery/raty.html#SYNTAX

Implementierung

Einführung von jQuery

Installieren Sie zuerst jQuery mit Yarn.

yarn add jquery

Verwenden Sie bei der Verwaltung mit Webpacker das Paket Node.js.

• Verwenden Sie nicht den Edelstein "jquery-rail". Der Befehl yarn add schreibt die Version in package.json, wenn das Paket installiert wird.

Schreiben Sie als Nächstes in die Webpacker-Konfigurationsdatei die Beschreibung zum Hinzufügen von verwaltetem jQuery.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
#Nachtrag
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
  })
)
#Bisher
module.exports = environment

Rufen Sie abschließend jQuery auf.

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #Nachtrag

Einführung von jQuery Raty

Speichern Sie das Bild und den Code lokal von der folgenden Site. https://github.com/wbotelhos/raty --App / Assets / Images Verzeichnis - Bild: https://github.com/wbotelhos/raty/tree/master/lib/images --Erstelle eine neue js-Datei unter app / javascript mit einem beliebigen Namen (diesmal "raty.js") - Code: https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

Einladung von jQuery Raty

Fügen Sie wie zuvor die neu erstellte js-Datei hinzu.

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('raty') #Nachtrag

Zu diesem Zeitpunkt sind die Funktionseinstellungen abgeschlossen.

Beschreibung in Ansichtsdatei

Schreiben Sie danach wie folgt in jede View-Datei, die Sie implementieren möchten.

    <div class="note note-rating", id="star">
      <h3>Umfassende Bewertung</h3>
    </div>
    <script>
      $('#star').raty({
        size      : 36,
        starOff   : '<%= asset_path('star-off.png') %>',
        starOn    : '<%= asset_path('star-on.png') %>',
        starHalf  : '<%= asset_path('star-half.png') %>',
        scoreName : 'note[rating]',
        half      : true,
      });
    </script>

Die folgenden zwei Artikel enthalten eine Beschreibung der Optionen und der Anzeige.

• https://qiita.com/yuki_0920/items/a966d9fa2bdb621f805d
• http://itref.fc2web.com/javascript/jquery/raty.html#SYNTAX

Zusammenfassung

Es war fast das erste Mal, dass jQuery in Rails eingeführt wurde, daher konnte ich die Funktion, die ich implementieren wollte, nicht finden. In Rails 6 und höher ist Webpacker (ein Tool zum gemeinsamen Verwalten von JavaScript) standardmäßig installiert. Um es wie gewünscht zu implementieren, müssen Sie lernen, wie Sie es und jede Datei, aus der Rails besteht, implementieren Ich hielt es für notwendig.