Django 在 javascript 中的模板標簽

Question

我的應用程序的 urls.py 是：

from django.urls import path
from . import views

app_name = 'javascript'
urlpatterns = [
    path('create_table', views.create_table, name='create_table')

我的 views.py 是：

def create_table(request):
    row_data = "this is row data"
    context = {'row_data': row_data}
    return render(request, 'javascript/create_table.html', context)

我的 create_table.html 是：

{% load static %}
<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>
<script src="{% static 'javascript/scripts/create_table.js' %}"></script>

我的 create_table.js 是：

function create_table() {
    document.getElementById("place_for_table").innerHTML = '{{ row_data }}';
}

document.getElementById("create_table").onclick = function() {
    create_table()
}

我想要做的是在單擊create_table按鈕時運行 create_table.js 腳本，該按鈕應place for table div 元素顯示“這是行數據”文本。

但是，顯示的只是{{ row_data )) 。

我已經閱讀了其他關於在 Javascript 中使用 Django 變量的類似問題，但根據我的理解，他們都建議按照我的方式去做，所以我不確定我做錯了什么。

Answer 1

如果您的模板中有一個要檢測點擊的元素，為什么不換一種方式將上下文變量傳遞給您的 JS 函數呢？

<button onclick="create_table({{ row_data }})">Click me</button>

通過這樣做，您可以檢查頁面以查看數據是否將被正確傳遞。 您可能必須通過像escapejs或safe這樣的過濾器傳遞數據。

或者你可以做類似的事情

{% load static %}

<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>

<script type="text/javascript">
    var row_data = "{{ row_data }}";
</script>
<script src="{% static 'javascript/scripts/create_table.js' %}">
</script>

這種方法的問題是變量的范圍，因為您可能不想全局聲明事物，因此它可以被認為是一種簡單的方法，但不一定是最佳解決方案。

Answer 2

當您編寫{{ row_data }}時，您使用的是 Django 特定的“語言”，稱為Django 模板語言，這意味着上述語法只能被 Django 模板“理解”。

你在這里做的是加載一個單獨的 JavaScript 文件，Django 模板語法在其中根本不起作用，因為當瀏覽器到達評估該文件的位置時， {{ row_data }}看起來只是另一個字符串文字，而不是什么你會期望。

如果您將 JavaScript 示例直接內聯到 Django 模板中，它應該可以工作。

或者，您可以使用 Django 模板中可用的數據以某種方式“引導”外部 JavaScript 文件，以下是我將如何去做：

創建_table.html

<script src="{% static 'javascript/scripts/create_table.js' %}"></script>
<script type="text/javascript">
$(function() {
  var create_table = Object.create(create_table_module);
  create_table.init({
    row_data: '{{ row_data }}',
    ...
  });
});
</script>

注意：將上述代碼包裝在 jQuery 的.ready()函數中是可選的，但如果您已經在您的應用程序中使用 jQuery，這是確保 DOM 在初始頁面加載后可以安全操作的簡單方法。

創建表.js

var create_table_module = (function($) {
  var Module = {
    init: function(opts) {
      // you have access to the object passed
      // to the `init` function from Django template
      console.log(opts.row_data)
    },
  };

  return Module;
})(jQuery);

注意：將 jQuery 實例傳遞給模塊是可選的，它只是在這里作為一個示例來展示如何將外部依賴項傳遞給模塊。

Answer 3

我所做的是在 {% block scripts %} 中包含 javascript/jquery 並使用 Django 特定數據，如下所示：

$.ajax({ type:"GET", url: "/reserve/run/?ip={{ row_data }}", dataType: "html", async: true, }).done(function(response) { $("#Progress").hide(); $('#clickid').attr('href','javascript:ClearFlag()'); var win = window.open("", "MsgWindow"); win.document.write(response); });

Answer 4

我找到了一種解決方案，可以避免對之前的所有答案進行額外輸入。

這有點老套：

只需將myjavascriptfile.js轉換為myjavascriptfile.js.html並將代碼包裝在<script>...</script>標記中。 比include它們而不是將它們鏈接到模板文件中。

我的模板.html

    ....
    {% block js_footer %}
    {% include "my_app/myjavascriptfile.js.html" %}
    {% endblock js_footer %}

我的javascriptfile.js.html

<script type="text/javascript">
    console.log('the time now is {% now "Y m d H:i:s" %}');
    ...
</script>

Answer 5

不要將函數寫在單獨的 js 文件中，而是將其寫在 html 頁面中的腳本標簽中，這樣它就可以使用 django 模板語言