[RUBY] Les rails 6 (avec Webpacker en standard) implémentent la fonction de classement par étoiles

introduction

Étant donné que la gestion de JavaScript a changé depuis la sortie de Ruby on Rails 6.0 en août 2019, je voudrais présenter "jQuery Raty --A Star Rating Plugin" basé sur les changements (points d'achoppement).

environnement

--Langage (Ruby 2.6.5) --Cadre (Rails 6.0.3.3)

référence

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

la mise en oeuvre

Introduction de jQuery

Tout d'abord, installez jQuery avec Yarn.

yarn add jquery

Lors de la gestion avec Webpacker, utilisez le package Node.js.

• N'utilisez pas le gem "jquery-rails". La commande yarn add écrira la version dans package.json lorsque le package est installé.

Ensuite, dans le fichier de configuration de Webpacker, écrivez la description de l'ajout de jQuery sous gestion.

config/webpack/environment.js

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

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

Enfin, appelez jQuery.

app/javascript/packs/application.js

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

Introduction de jQuery Raty

Enregistrez l'image et le code localement à partir du site ci-dessous. https://github.com/wbotelhos/raty

• répertoire app / assets / images - Image: https://github.com/wbotelhos/raty/tree/master/lib/images --Créez un nouveau fichier js avec n'importe quel nom sous app / javascript (cette fois "raty.js") - Code: https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

Invitation de jQuery Raty

Comme précédemment, ajoutez le fichier js nouvellement créé.

app/javascript/packs/application.js

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

À ce stade, les réglages des fonctions sont terminés.

Description dans le fichier View

Après cela, écrivez comme suit dans n'importe quel fichier View que vous souhaitez implémenter.

    <div class="note note-rating", id="star">
      <h3>Une évaluation complète</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>

Les deux articles suivants sont détaillés pour la description des options et de l'affichage.

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

Résumé

C'était presque la première fois que j'introduisais jQuery dans Rails, donc je n'ai pas trouvé la fonction que je voulais implémenter. Dans Rails 6 et les versions ultérieures, Webpacker (un outil de gestion collective de JavaScript) est installé en standard, donc afin de l'implémenter comme vous le souhaitez, vous devez apprendre à l'implémenter et à chaque fichier dont Rails est composé. J'ai senti que c'était nécessaire.