DjangoでJquery ratyの値を反映したい

初めてWebアプリケーションを制作しているのですが上手くいきません。
DjangoでフォームからJquery ratyの値をデータベースに保存できたのですが、
その後に、値に応じた星の表示がうまくいきません。
調べたのですが、Rubyでの情報が多く試してみたものの上手く行かず、またJavaScriptの知識もあまりありません。
template2とJavascriptの記述が正しいのかわかりません。

models
1class Shop(models.Model):
2    title = models.CharField(verbose_name='店舗名', max_length=100)
3
4class Comment(models.Model):
5    title = models.CharField(verbose_name='タイトル', max_length=255)
6    star = models.FloatField(verbose_name='評価', blank=True, null=True)
7    body = models.TextField(verbose_name='本文')
8    posted_at = models.DateField(auto_now_add=True)
9    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

forms
1class Commentform(forms.ModelForm):
2
3    class Meta:
4        model = Comment
5        fields = ['title', 'star', 'body']

template1
1{% extends 'base.html' %}
2
3{% block content %}
4<div class="comment-form">
5  <div class="container">
6     <form method="post">
7     {% csrf_token %}
8       <table>
9         <label>{{ form.title.label }}</label>
10         {{ form.title }}
11         <label>{{ form.star.label }}</label>
12         <div id="stars"></div>
13         <label>{{ form.body.label }}</label>
14         {{ form.body }}
15       </table>
16        <button class="submitbutton" type="submit">送信</button>
17      </form>
18    </div>
19  </div>
20</div>
21{% endblock %}

template2
1{% for comment in shop.comment_set.all %}
2  <div class="review-body">
3    <p class="review-name">{{ comment.user.username }}</p>
4    <p class="review-title">{{ comment.title }}</p>
5    <p class="review-comment">{{ comment.body }}</p>
6    <p class="review-date">{{ comment.posted_at }}</p>
7
8    **データベースの値がJquery Ratyの星に反映されない**
9    <p id="user_rating">{{ comment.star }}</p> 
10  </div>
11{% endear %}

JavaScript
1$(function() {
2  $('#stars').raty({
3    path: '/static/raty-image/',
4    scoreName: 'star',
5  });
6  $('#user_rating').raty({
7    path: '/static/raty-image/',
8    readOnly: true,
9
10    **色々試しましたがscoreに値が入らない**
11    score: 'comment.star',
12  });
13});

mistn

2020/03/10 01:18

JavaScriptはテンプレートとは別のファイルに書いていますか？

courage23

2020/03/10 01:41

はいそうです！ダメなんでしょうか⁇

mistn

2020/03/10 05:03

ダメではないですよ。別のファイルなのか同じなのかで回答が変わりそうだったので質問しただけです。結果として回答に影響はなさそうでしたが。

行動規範の内容に同意します

回答1件

ベストアンサー

今回の質問とは直接の関係はありませんが注意点として1点、テンプレートの中forを使って要素を作る際にはidが重複しないように気をつけてください。

jQueryのeachメソッドを使うのが楽そうなので、今回はidではなくclassをつけたほうがよさそうです。
それと、jquery.ratyではdata-score属性をつけることでscoreの初期値を設定できるようなのでこれもつけておきます。
data-score属性には{{ comment.star }}を設定します。

html
1<p class="user_rating" data-score={{ comment.star }}>{{ comment.star }}</p>

JavaScriptのほうはこんな感じです。
classにuser_ratingがついてる要素に対して処理を行っているだけです。

js
1$(function () {
2    $('.user_rating').each(function(){
3        $(this).raty({
4            path: '/static/raty-image/',
5            readOnly: true,
6
7            // data-score属性があればなくても動く
8            score: parseFloat($(this).attr('data-score')) 
9        });
10    });
11});