Использование различных объектов содержимого, передаваемых из Views в Template в зависимости от того, какую кнопку нажимает пользователь

Question

В настоящее время у меня есть одна модель с именем Comments.

После входа в канал YouTube в форме пользователь попадает в шаблон индекса, в котором отображаются все комментарии к видео канала YouTube, содержащего одно из трех ключевых слов (ключевое слово A, ключевое слово B, ключевое слово C).

Я хотел бы добавить функцию, чтобы в верхней части страницы было три ссылки / кнопки (каждая для одного из ключевых слов).

Пользователь может нажать на эту ссылку и без перезагрузки страницы (означает ли это, что мне понадобится AJAX?), Чтобы увидеть комментарии с этим ключевым словом, а не все комментарии с любым из трех ключевых слов.

В настоящее время я отправляю четыре объекта переменных содержимого из представлений в шаблон (один со всеми комментариями и три других объекта, каждый из которых содержит только объекты комментариев для этого ключевого слова).

Так что шаблон имеет доступ к нужным мне данным, мне просто нужно сделать так, чтобы при нажатии на одну из ссылок / кнопок показывался только этот контент.

Просмотры

def addTodo(request):

    new_item =Channel(channel=request.POST['channel'])

#if channel exists render page with comments
   if Channel.objects.filter(channel=new_item.channel).exists():
       channel_obj=Channel.objects.get(channel=request.POST['channel'])
        comments_object=Comments.objects.filter(channel=channel_obj)
        comments_objectA=Comments.objects.filter(channel=channel_obj, key="keywordA")
        comments_objectB=Comments.objects.filter(channel=channel_obj, key="keywordB")
        comments_objectC=Comments.objects.filter(channel=channel_obj, key="keywordC")

        return render(request, 'todo/index.html', {'comments_all': comments_object, 'commentsa': comments_objectA,'commentsb': comments_objectB,'commentsc': comments_objectC})

Индекс шаблона

#three buttons/links on top to allow user to sort..the part Im not sure how to do:
<button type="button"onclick="justshowrelatedcomment>KeywordA!</button>
<button type="button"onclick="justshowrelatedcomment>KeywordB</button>
<button type="button" onclick="justshowrelatedcomment>KeywordC</button>

#the comment structure, would want to replace comments_all with whatever button is clicked on.
<div class="new_comment">

    <!-- build comment -->
    {%for a in comments_all%}
    <ul class="user_comment">

      <!-- current #{user} avatar -->
     <!-- the comment body --><div class="comment_body">
        <p>{{ a.question }}</p>
      </div>



     </ul>
     {% endfor %}
    </div>
</div>

Я застрял .. Возможно ли это без Ajax?

Если Ajax - мой единственный / лучший вариант, как мне поступить?

Я использовал это решение, чтобы избежать AJAX, так как я не мог понять, как использовать AJAX.

Спасибо и ура.

Answer 1

Вы можете сделать это без ajax, но это не уменьшает размер загружаемой страницы. Не-ajax клиентское решение состоит в том, чтобы назначить каждому элементу комментария класс или атрибут на основе его ключевого слова - здесь вы уже использовали элемент <ul> с классом user_comment.

Поэтому попробуйте поместитьключевое слово в качестве атрибута или класса для вашего комментария. Затем вы можете выбрать, а затем скрыть или показать каждый класс ключевых слов комментариев, используя кодировку javascript.

Это может быть сделано по-разному, но было бы просто использовать чистый js, поэтому я помещаю шаблон для реализации:

<!-- toggling comments -->
<script>

function toggle_keyword(keyword) {
    document.querySelectorAll('.user_comment').forEach(function (e) {
        e.style.display = 'none'; 
    });
    document.querySelectorAll('.' + keyword).forEach(function (e) {
        e.style.display = 'block'; 
    });
}
</script>

<button type="button" onclick="toggle_keyword('KeywordA');">hide/show KeywordA!</button>
<button type="button" onclick="toggle_keyword('KeywordB');">hide/show KeywordB</button>
<button type="button" onclick="toggle_keyword('KeywordC');">hide/show KeywordC</button>


#the comment structure, would want to replace comments_all with whatever button is clicked on.
<div class="new_comment">

    <!-- build comment -->
    {%for a in comments_all%}
    <ul class="user_comment {{ a.key }}">

      <!-- current #{user} avatar -->
     <!-- the comment body -->
      <!-- here I added a.key as a class to the div -->
      <div class="comment_body">
        <p>{{ a.question }}</p>
      </div>



     </ul>
     {% endfor %}
    </div>
</div>

Answer 2

Определенно Ajax будет лучшим вариантом для вас. Вам просто нужно разместить один флаг при нажатии кнопки с использованием AJAX. На основании этого флага вы можете решить, какие данные вы хотите передать для вашего html

HTML
<button onclick="justshowrelatedcomment('A')">KeywordA</button>
<button onclick="justshowrelatedcomment('B')">KeywordB</button>
<button onclick="justshowrelatedcomment('C')">KeywordC</button>

<script>
function justshowrelatedcomment (flag) {
    $.ajax({
    url: 'addTodo',
    type: 'POST',
    data: {
       flag: flag
    },
    success: function(data){
        return data;
    }
});
}
</script>

View
def addTodo(request):
    flag = request.POST['flag']
    new_item =Channel(channel=request.POST['channel'])

Надеюсь, это сработает для вас.