Django导航:扩展与innerHTML

我有一个web应用程序，它有一个侧边栏导航菜单，可以选择在主内容块中看到什么。重要的是要提醒您，这个侧边栏的项目数量是动态变化的。保存此侧边栏的文件称为"base.html"

由于我为每个边栏项目（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>

文件：.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>

然后在视图.py…

if request.is_ajax():
    ...
    url = ...
    context = ...
    return render(request, url, context)

我已经对这两个选项进行了编码，到目前为止，我宁愿选择第二个选项，因为它看起来更干净，因为我不需要设置像侧边栏项目那样多的url。这种导航也感觉更快，因为只有部分网页被重新加载。

但是，我发现的主要问题是，在每个模板文件（ex:a.html）中编码的javascript函数不能与innerHTML（函数未定义）一起工作，尽管它们的代码是由Django render方法返回的。有人知道为什么吗？

一个可能的解决方法是将其他文件中的javascript函数分离，并根据需要加载该文件，但如果能立即使其工作，那就太好了（至少要简单得多）。

提前感谢