用通過Javascript創建的變量替換Django模板變量

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的新手，因此我將為您提供建議，並請您閱讀一些有關它的內容。

可能的方法

1. • 您可以在Django中實現視圖，該視圖使用從js傳遞給視圖的變量來呈現一些HTML。 並使用js將返回的HTML包含在您的頁面（DOM）中。
2. • 您正在填充一個表，那里有很多用於渲染表的js插件，然后其中一些可以讓您指定數據源。 使用中的一種，然后使用提供數據的Django視圖返回數據（為此推薦： JsonResposnse 。）
3. • 不要使用Django模板系統來呈現應用程序的該部分，請僅使用HTML + js，然后使用js然后從Django調用視圖以獲取一些數據。

Answer 2

一旦您在運行javascript的瀏覽器中，便不再需要django模板的任何概念。 然后，您正在處理純html / javascript。

在這種情況下，三種最常見的方法是：

1. 將您的html和javascript作為功能組件與模板完全分開。 僅使用您的模板來構建初始頁面。 不幸的是，在大多數情況下，這將導致功能重復。
2. 將數據作為json與您提供的網頁捆綁在一起，然后使用javascript模板語言在客戶端呈現。
3. 在客戶端和服務器上使用相同的模板系統。 您可以使用現有的眾多模板系統（react / angular / etc）中的任何一個，並運行node.js服務器在服務器端進行渲染。 這可能是一個深而復雜的兔子洞。 您要啟動的google關鍵字是“ django javascript服務器端渲染”