Javascript 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>

<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>

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

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

一种可能的解决方法是在其他文件中分离javascript函数，并根据需要加载此文件，但这将非常简单，至少可以让它直接工作

---

提前感谢

通过简单地替换以下行，可以解决javascript代码中提到的问题：

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

作者：

我在这篇相关文章中找到了它：

这篇文章可能有助于理解这两行之间的区别：

谢谢

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

    return render(request, url, context)

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

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