Django / JS - Не могу установить значение по умолчанию для уже понравившегося сообщения - PullRequest
Новая
       3

Django / JS - Не могу установить значение по умолчанию для уже понравившегося сообщения

1 голос
/ 14 апреля 2020

Я хочу проверить условно для каждого сообщения, понравилось ли зарегистрированному пользователю это, или нет, соответственно, я хочу передать контекст, который назначает кнопке класс CSS для значения цвета по умолчанию, когда страница загружается .

Я не хочу использовать HTML условие if / else, так как я использую JavaScript для изменения цвета кнопки при нажатии.

Несмотря на то, что я могу изменить цвет после нажатия, но я застрял в том, как передать состояние сообщения по умолчанию при загрузке страницы.

Это JavaScript код: 

window.onload = function(){
  var thumb_up = document.getElementById('thumb_up');
  thumb_up.style.cursor = 'pointer';
  thumb_up.onclick = function(){
    var req = new XMLHttpRequest();
    var id = this.getAttribute('data-id');
    var url = '/api/like/'+id+'?format=json';
    req.onreadystatechange = function(){
      if(this.readyState==4 && this.status==200){
        // var data = eval(req.responseText);
        data = JSON.parse(req.responseText);
        var likes = data.likes;
        document.getElementById('likes-count').innerHTML = likes+' votes';
        //changing color
        if(data.liked=='true'){
          thumb_up.className = "material-icons thumb_up_liked";
        } else{
          thumb_up.className = "material-icons thumb_up";
        }
      }
    };
    req.open("GET", url, true);
    req.send();
  }
}

Кроме того, я попытался отправить значение по умолчанию для класса CSS / HTML из бэкэнда, но я испортил синтаксис. Не могу разобраться в логике c и отправить ее из бэкэнда. 

class PostListView(ListView):
    model = Post
    #generic format : <app>/<model>_<viewtype>.html
    template_name = 'home_login.html'
    context_object_name = 'post'
    ordering = ['-date']
    paginate_by = 5

    def get(self, request, *args, **kwargs):
        post = Post.objects.all()
        post_self = self.get_object()
        class_name = "thumb_up_liked"
        context = {
            'class': class_name,
            'post': post,
        }
        if request.user in post_self.likes.all():
            return render(request, 'home_login.html', context)

1 Ответ

0 голосов
/ 14 апреля 2020

Вы можете собрать значение переменной контекста class в переменной javascript в вашем файле home_login.html следующим образом: 

<script>
   var thumbs_class = {{ class }};
</script>

Затем вы можете использовать это значение в коде javascript по адресу требуемое место как: 

thumb_up.className = "material-icons "+ thumbs_class;

Убедитесь, что ваш выше javascript загружается после объявления переменной.

...