Django/jQuery：處理模板繼承和JS文件加載

在Django中，如何處理這樣的事實，即在實際使用它之前需要等待加載JS文件？Django/jQuery：處理模板繼承和JS文件加載

讓我們看到了問題的例子：

base.html文件

<!DOCTYPE html> 
<html> 

<head>...</head> 
<body> 
    {% include "content.html" %} 

    <script src="jquery.js"></script> 
    <script src="awesome-script.js"></script> 
</body> 
</html>

content.html

<script> 
    $(document).ready(function(){ 
     ... 
    }); 
</script>

這在邏輯上會失敗（$ is undefined）。我可以在調用腳本之前加載jQuery，但我試圖避免在我的主要內容之前加載JS文件以儘可能快地加載網站。

那麼，我該怎麼辦？謝謝。

來源

2015-07-03 David D.

我真的不明白你的代碼，因爲你已經發布了它。 'content.html'與'base.html'有什麼關係？如果它提供了「{％block main-content％}」，那麼顯然這個腳本在加載jQuery之前被調用。 – Wtower

是的，當然是之前調用過的（我用更明顯的例子更新了代碼）整個問題是我們需要在調用JS之前加載內容（不要放慢頁面），但是我們必須等所有的JS都是在調用content.html中的腳本之前加載。 –

或者，如果jquery是在內容之前加載的唯一腳本，那也可以嗎？ –

由於您的腳本使用jQuery，因此您可以簡單地使用jQuery的$(document).ready()和$(window).load()函數在DOM準備就緒並且所有窗口內容已分別加載的事件上綁定函數。

如果你不使用jQuery，來看看這些相對問題，以瞭解如何與純JS模仿上述行爲：

編輯1：包含順序很重要。必須在執行任何需要jQuery的腳本之前包含jQuery腳本。

編輯2：你可以組織你的模板，更好地從主要內容分別保持腳本，無論是與第二個模板：

base.html文件

<!DOCTYPE html> 
<html> 

<head>...</head> 
<body> 
    {% include "content.html" %} 
    {% include "js.html" %} 
</body> 
</html>

JS。 html

<script src="jquery.js"></script> 
<script src="awesome-script.js"></script> 
<script> 
    $(document).ready(function(){ 
     ... 
    }); 
</script>

（在這種情況下，您渲染base.html）

或用塊（推薦）：

base.html文件

<!DOCTYPE html> 
<html> 

<head>...</head> 
<body> 
    {% block content %}{% endblock %} 
    {% block scripts %}{% endblock %} 
</body> 
</html>

內容。HTML

{% extends 'base.html' %} 
{% block content %} 
    ... 
{% endblock %} 
{% block scripts %} 
    <script src="jquery.js"></script> 
    <script src="awesome-script.js"></script> 
    <script> 
     $(document).ready(function(){ 
      ... 
     }); 
    </script> 
{% endblock %}

（在這種情況下，您渲染content.html）

來源

2015-07-03 09:21:53 Wtower

謝謝。我使用jQuery，但尚未加載，所以在調用'$（document）' –

時沒有定義'$'。歡迎，您只需在腳本之前包含jquery腳本。 – Wtower

事實已經如此。在base.html中，Jquery被加載，然後我的腳本被加載。但是當進入我的主要內容時，根本沒有加載JS（這是正常的） –

擴展Wtower的建議 - 保住自己的接受。

我真的會堅持在他的例子中使用基於模板繼承的方法。我想向大家介紹幾個元素這一做法，以涵蓋其他一些共同的需求：

<!DOCTYPE html> 
<html> 
<head>{% block scripts-head %}{% endblock %}</head> 
<body> 
    {% block content %}{% endblock %} 
    {% block scripts %} 
     <script src="jquery.js"></script> 
    {% endblock %} 
    <script>{% block script-inline %}{% endblock %}</script> 
</body> 
</html>

有3種思路的位置：

添加在頭一個佔位符，如果你能在某些時候需要腳本。自我解釋。
在基本文件中包含常用腳本。如果它們很常見，屬於基本文件，則不必在每個模板中重複自己。然而，你把它放在塊內部，所以它可以在層次結構中被覆蓋。
```
{% extends "base.html" %} 
{% block scripts %} 
    {{ block.super }} 
    <script src="a-local-lib.js"></script> 
{% endblock %} 
```
的關鍵是使用{{ block.super }}帶來父模板中定義的任何腳本。當您的模板中有多個級別的繼承時，它的工作效果特別好。您可以控制腳本是在繼承腳本之前還是之後。當然，如果您願意，您可以完全覆蓋該塊，不包括{{ block.super }}。
基本上是一樣的想法，但與原始的JavaScript。你也可以用同樣的方法：每個需要包含一些內聯javascript的模板將會有它的{{ block script-inline }}，並且將以{{ block.super }}開頭，因此無論父進程是否包含在內。

例如，我在我的項目中使用Ember，並有幾個初始化程序來設置項目設置和加載引導程序數據。我的基本應用程序加載模板具有全局項目設置初始值設定項，子模板定義本地設置和數據。

來源

2015-07-03 13:33:36 spectras

非常感謝，你讓我的一天@spectras。 – ifrain

同上。這正是我正在尋找的。 –

Django/jQuery：處理模板繼承和JS文件加載

回答

相關問題