javascript - 将 Django 模板变量替换为通过 Javascript 创建的变量

Question

我对 Django 和 Javascript 非常陌生(< 3 周!)，并且有一个可能很愚蠢的问题，因此我们将不胜感激。

在我当前的代码中，我有一个用 HTML 呈现的表格，代码如下:

<table border="1" class="dataframe">
      <thead>
        <tr>
          <th>{{ results.0.columns.1 }}</th>
          <th>{{ results.0.columns.1 }} </th>
          <th>{{ results.0.columns.2 }} </th>
          <th>{{ results.0.columns.6 }} </th>
        </tr>
      </thead>
      <tbody>
      {% for row in results.0.values %}
        <tr>
          <td> {{row.0}} </td>
          <td> {{row.1}} </td>
          <td><img src="{{row.2}}" alt="img" height="150"></td>
          <td> {{row.6}} </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

如您所见，我在许多区域引用了格式为 {{someDjangoVariable}} 的 django 模板变量。

但是，我想用 Javascript 创建的变量替换这些变量。我正在使用 Javascript 来获取一些用户输入，这最终会改变表的 View 。

我的Javascript设置如下:

<script> 
     function myFunction() {
        var index = someNumber
        var string = `results.${index}.columns.0`;

     document.getElementById('demo').innerHTML = string;
  }
</script>

在 Javascript 中创建的 string 变量会产生完全模仿 Django 模板变量的结果。例如，string = results.0.columns.1。

但是，我不确定如何将此字符串变量传递到 HTML 本身。理想的 html 格式应该是这样的:

      <thead>
        <tr>
          <th>{{ string1 }}</th>
          <th>{{ string2 }} </th>
          <th>{{ string3 }} </th>
          <th>{{ string4 }} </th>
        </tr>
      </thead>
      <tbody>
      {% for row in string5 %}
        <tr>
          <td> {{row.0}} </td>
          <td> {{row.1}} </td>
          <td> {{row.2}} </td>
          <td> {{row.6}} </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

Any guidance on how I can do this? 

Answer 1

一旦您在浏览器中运行 javascript，就不再有任何 django 模板的概念。然后您将处理纯 html/javascript。

在这种情况下，三种最常见的方法是:

1. 将 html 和 javascript 作为功能组件交付，与模板完全分开。仅使用您的模板来构建初始页面。不幸的是，在大多数情况下，这会导致功能重复。
2. 将数据以 json 形式与您提供的网页捆绑在一起，然后使用 JavaScript 模板语言将其呈现在客户端。
3. 在客户端和服务器上使用相同的模板系统。您可以使用现有的众多模板系统(react/angular/etc)中的任何一个，并运行 node.js 服务器来将其呈现在服务器端。这可能是一个又深又复杂的兔子洞。您开始的 Google 关键字将是“django javascript 服务器端渲染”