0

我目前有一个模型叫做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。

谢谢和欢呼。

4

2 回答 2

0

绝对 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'])

希望这对你有用。

于 2019-10-25T09:36:20.417 回答
0

您可以在没有 ajax 的情况下执行此操作，但它不会减少加载页面的大小。非 ajax 客户端解决方案是根据其关键字为每个注释元素分配一个类或属性 - 这里您已经使用了一个带有类的<ul>元素。user_comment

因此，请尝试将关键字作为属性或类添加到您的评论 div 中。然后，您可以使用 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>
于 2019-10-25T09:41:39.300 回答