Django導航：擴展與innerHTML

我有一個Web應用程序，它有一個側欄導航菜單，用於選擇要在主內容塊中看到的內容。請注意，此邊欄的項目數量動態變化很重要。包含此側邊欄的文件稱爲'base.html'Django導航：擴展與innerHTML

由於每個側邊欄項目（a.html，b.html等）都有一個不同的模板，所以最好的方法是將其內容加載到主內容塊中？

選項A（擴展）：

文件：base.html文件

<nav id="sidebar"> 
    <div class="navbar-default sidebar" role="navigation"> 
     <div class="sidebar-nav navbar-collapse navbar-ex2-collapse"> 
      <ul class="nav in" id="side-menu"> 
       {% for submodule in submodules %} 
        <li> 
         <p id="{{ submodule }}"><i class="fa fa-table fa-fw"></i> {{ submodule }}</p> 
        </li> 
       {% endfor %} 
      </ul> 
     </div> 
    </div> 
</nav> 
<div id="page-wrapper"> 
    {% block content %} {% endblock %} 
</div>

文件：a.html

{% extends 'base.html' %} 
{% load staticfiles %} 
{% load i18n %} 

{% block content %} 
    <whatever...> 

{% endblock %}

選項B（innerHTML的）：

文件： base.html

<nav id="sidebar"> 
    <div class="navbar-default sidebar" role="navigation"> 
     <div class="sidebar-nav navbar-collapse navbar-ex2-collapse"> 
      <ul class="nav in" id="side-menu"> 
       {% for submodule in submodules %} 
        <li> 
         <p id="{{ submodule }}"><i class="fa fa-table fa-fw"></i> {{ submodule }}</p> 
        </li> 
       {% endfor %} 
      </ul> 
     </div> 
    </div> 
</nav> 
<div id="page-wrapper"> 
    <div id="submodule-view" class="row"> 
     <!-- View content will be included here ---> 
    </div> 
</div> 

<script> 
    ... 
    // For every sidebar button dinamically generated, 'loadActiveSubmodule' 
    // function gets linked to its click event. 
    var theParent = document.querySelector("#side-menu"); 
    theParent.addEventListener("click", loadActiveSubmodule, false); 

    // The selected submodule content is displayed when its button is clicked. 
    function loadActiveSubmodule(e) { 
     if (e.target !== e.currentTarget) { 
      $.ajaxSetup({ 
       beforeSend: function(xhr, settings) { 
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
         xhr.setRequestHeader("X-CSRFToken", csrftoken); 
        } 
       } 
      }); 
      $.ajax({ 
       datatype: 'json', 
       data: ..., 
       url: ..., 
       type: 'post', 
       success: function(htmlResult){ 
        document.getElementById('submodule-view').innerHTML=htmlResult; 
       } 
      }); 
     } 
     e.stopPropagation(); 
    } 
</script>

，然後在views.py ...

if request.is_ajax(): 
    ... 
    url = ... 
    context = ... 

    return render(request, url, context)

我有編碼兩種選擇，到目前爲止，我寧願採取第二種選擇，因爲它似乎更清潔，因爲我不需要設置儘可能多的網址作爲邊欄項目我有。由於只有部分網頁正在重新加載，因此此導航也感覺更快。

但是，我發現的主要問題是，在每個模板文件（例如：a.html）中編碼的javascript函數不能用於innerHTML（函數未定義），儘管它們的代碼是由Django渲染方法返回的。有人知道爲什麼

一個可能的解決方法是將其他文件中的javascript函數分開，並根據需要加載此文件，但它會很棒（至少更簡單），以使其立即可用。

在此先感謝

來源

2015-04-06 Fernando Martin

與JavaScript代碼中提到的問題可以通過簡單地替換以下行（S）來解決：

document.getElementById('submodule-view').innerHTML=htmlResult;

通過：

$("#submodule-view").html(htmlResult);

我發現它在此相關帖子中：How to replace innerHTML of a div using jQuery?

此帖m ight有幫助，以及瞭解這兩行之間的區別：JQuery html() vs. innerHTML

謝謝。

來源

2015-04-06 13:56:16

Django導航：擴展與innerHTML

回答

相關問題