Django与django-comments-xtd：不刷新页面更新模板变量/对象

解决方案 #

这问题其实挺典型的——静态模板标签只能在页面渲染时生成固定内容，动态切换内容肯定得换「后端接口+前端异步请求」的思路。给你几个可行的实现步骤：

1. 后端新增API接口返回评论配置 #

首先得把get_commentbox_props的逻辑移到接口里，让前端能通过视频ID动态获取对应配置。以Django为例：

from django.http import JsonResponse
from django.contrib.comments.templatetags.comments import get_commentbox_props
from .models import Video  # 替换成你的视频模型

def fetch_comment_props(request, vid_id):
    try:
        target_video = Video.objects.get(id=vid_id)
        comment_props = get_commentbox_props(target_video)
        return JsonResponse(comment_props)
    except Video.DoesNotExist:
        return JsonResponse({"error": "视频不存在"}, status=404)

然后在urls.py里配置接口路由：

path('api/comment-props/<int:vid_id>/', fetch_comment_props, name='api_comment_props')

2. 前端修改评论加载逻辑 #

把原来的loadComments改成支持动态传入视频ID，通过异步请求获取新配置，再更新评论组件：

function loadComments(vidId) {
    // 先清空旧的评论容器（避免DOM冗余）
    const commentContainer = document.getElementById('comment-box-container');
    commentContainer.innerHTML = '';

    // 请求后端接口获取新视频的评论配置
    fetch(`/api/comment-props/${vidId}/`)
        .then(res => {
            if (!res.ok) throw new Error('请求失败');
            return res.json();
        })
        .then(props => {
            window.comments_props = props;
            // 这里根据你使用的评论组件重新初始化
            // 比如如果是基于props渲染的评论框，调用初始化方法：
            renderCommentBox(props, commentContainer);
        })
        .catch(err => console.error('加载评论失败:', err));
}

// 示例：渲染评论框的辅助函数（根据你的实际组件调整）
function renderCommentBox(props, container) {
    // 假设评论框是基于props生成的HTML，这里只是示例
    const commentBoxHtml = `
        <div class="comment-box" data-props='${JSON.stringify(props)}'>
            <!-- 评论组件内容会在这里渲染 -->
        </div>
    `;
    container.innerHTML = commentBoxHtml;
    // 如果是第三方插件，可能需要调用它的初始化方法，比如：
    // initThirdPartyCommentPlugin(container);
}

3. 切换视频时调用函数 #

当播放器加载新视频vid_1时，直接传入它的ID调用loadComments就行：

// 比如切换视频的回调里：
player.on('videoChange', (newVideo) => {
    loadComments(newVideo.id); // newVideo.id就是vid_1的ID
});

额外提示 #

• 如果你的评论组件是一次性初始化的，一定要记得先销毁旧组件再渲染新的，避免DOM冗余或者事件冲突。
• 要是不想写API，也可以在页面渲染时预加载所有可能用到的视频评论配置，但这种方法只适合视频数量少的场景，扩展性很差，还是API方案更通用。

内容的提问来源于stack exchange，提问作者Prithviraj Mane