Django模板中用Tailwind构建环形进度条时无法访问JS变量问题

问题核心 #

你在使用 Tailwind CSS 复刻环形进度条组件时，无法将 Django 视图传递的 average_rate=4.5 赋值给 JavaScript 中的 percent 变量，导致进度条无法正常渲染。

解决方案 #

1. 视图层预处理百分比

在视图中将评分转换为百分比（假设是5分制），直接传递给模板，减少模板层计算：

class RatePage(TemplateView):
    template_name = "tailwind/rate-page.html"
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        average_rate = 4.5
        # 将5分制评分转换为百分比
        context['progress_percent'] = (average_rate / 5) * 100
        context['average_rate'] = average_rate
        return context

2. 模板层修改：原生 JavaScript 实现进度条

移除原组件中的 Vue/Alpine 绑定语法，改用原生 JS 动态设置进度条属性，同时正确获取 Django 传递的变量：

<div class="flex flex-col relative">
  Score
  <svg class="w-20 h-20">
    <!-- 灰色背景圆环 -->
    <circle
      class="text-gray-300"
      stroke-width="5"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
    <!-- 蓝色进度圆环 -->
    <circle
      id="progress-bar"
      class="text-blue-600"
      stroke-width="5"
      stroke-linecap="round"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
  </svg>
  <!-- 居中显示评分 -->
  <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xl text-blue-700">
    {{ average_rate }}
  </span>
</div>

<script>
  // 直接通过 Django 模板变量获取百分比值
  const percent = {{ progress_percent }};
  const circumference = 2 * Math.PI * 30;
  const progressBar = document.getElementById('progress-bar');
  
  // 设置进度条的 dash 属性
  progressBar.style.strokeDasharray = circumference;
  progressBar.style.strokeDashoffset = circumference - (percent / 100) * circumference;
</script>

3. 可选：使用 Alpine.js 简化绑定（若已引入）

如果你的项目已使用 Alpine.js，可以保留组件的绑定语法，直接将 Django 变量注入 Alpine 的数据中：

<!-- 确保已引入 Alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div class="flex flex-col relative" 
     x-data="{ percent: {{ progress_percent }}, circumference: 2 * Math.PI * 30 }">
  Score
  <svg class="w-20 h-20">
    <circle
      class="text-gray-300"
      stroke-width="5"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
    <circle
      class="text-blue-600"
      stroke-width="5"
      :stroke-dasharray="circumference"
      :stroke-dashoffset="circumference - percent / 100 * circumference"
      stroke-linecap="round"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
  </svg>
  <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xl text-blue-700" 
        x-text="{{ average_rate }}"></span>
</div>

关键说明 #

• Django 模板渲染时会直接替换 {{ 变量名 }} 为对应数值，因此可以直接在 JavaScript 或 HTML 属性中使用。
• 若评分不是5分制，只需调整视图中 progress_percent 的计算逻辑即可。
• 原生 JS 方案无需额外依赖，兼容性更好；Alpine.js 方案代码更简洁，但需要确保项目已引入该库。

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