Jquery Rating

http://wbotelhos.com/raty/ 在寫評價的時候可以用來製作出星星的效果

先在右上角下載壓縮檔,

• lib裡面的jquery.rating.js放進vendor/assets/javascripts
• lib裡面的css放進vendor/assets/stylesheet
• 圖檔放進app/assets/images folder.
• application.js加上//= require jquery.raty

在assets增加一個js檔（或者每個檔案裡面script標籤也可以）

$(document).ready(function(){
  $('#star-rating').raty({
    path: '/assets/',
    scoreName: 'game[rating]',
    score: function() {  
        return $(this).attr('data-score');
    }

  $('.star-rating').raty({
      path: '/assets/',
      readOnly: true,
      score: function() {
        return $(this).attr('data-score');
    }
  });

});

path是指定了圖檔的所在位置, score那一段如果不加在上面那邊的話,第一次新增的時候沒有問題,但是會照成每一次修改的時候都一定要重新設定一次星等,因為他抓不到已經儲存好的值

評價顯示頁面

#草稿

<h1>遊戲介紹</h1>
標題: <%= @game.title %>
製作公司: <%= @game.company %>
平台: <%= @game.os %>
評分: <div class="star-rating" data-score=<%= @game.rating %> ></div>
介紹: <%= @game.review %>

撰寫評價頁面

  <div class="form-group">
    <%= f.label :rating, "評分" %>
    <div id="star-rating" data-score=<%= @game.rating %>"></div>
  </div>

這樣就大功告成了

在heroku上如果碰到星星圖顯示不出來的問題,可以試著改下面的設定,並且不要忘記執行rake assets:precompile

#config/environments/production.rb
config.assets.compile = true #本來是false

https://mackenziechild.me/12-in-12/5/ https://rubyplus.com/articles/4011-Using-Star-Rating-jQuery-Plugin-Raty-with-Twitter-Bootstrap-4-in-Rails-5-Apps