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进行一些用户输入，最终改变了表的视图。

我的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

首先，没有愚蠢的问题，只是关于我们不知道的事情的问题，所以可以问。

说

Django在服务器端“构建”页面的HTML，到那时，您的js甚至没有梦想被执行。将内容（由Django先前生成的）下载到您的浏览器中后，即会执行Javascript。

如您所见，在使用Django模板系统生成HTML时，您不能使用js变量。在生成HTML时，这些变量不存在。

由于您像以前所说的对Django刚起步，因此我会给您一个建议，并由您自己来阅读。

可能的方法

- 您可以在Django中实现视图，该视图使用从js传递给视图的变量来呈现一些HTML。并使用js将返回的HTML包含在您的页面（DOM）中。
- 您正在填充一个表，那里有很多用于呈现表的js插件，然后其中一些可以让您指定数据源。使用的其中一个提供给调用的数据，并在Django视图中返回数据（为此建议使用JsonResposnse。）
- 请勿使用Django模板系统来呈现应用程序的该部分，仅使用HTML + js，然后使用js从Django调用视图以获取一些数据。

Answer 2

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

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

以完全独立于模板的形式提供html和javascript功能组件。仅使用您的模板来构建初始页面。不幸的是，在大多数情况下，这将导致功能重复。
将数据与json捆绑在一起，并提供您所服务的网页，然后使用javascript模板语言将其呈现给客户端。
在客户端和服务器上使用相同的模板系统。您可以使用现有的众多模板系统（react / angular / etc）中的任何一个，并运行node.js服务器在服务器端进行渲染。这可能是一个深而复杂的兔子洞。您要启动的google关键字将是“ django javascript服务器端渲染”

用通过Javascript创建的变量替换Django模板变量

2 个答案:

可能的方法