Question

我有一个Web应用程序，它有一个侧边栏导航菜单，可以选择在主要内容块中看到的内容。警告您此侧边栏的项目数量会动态变化，这一点非常重要。保留此侧边栏的文件称为＆＃39; base.html＆＃39;

因为我为每个侧边栏项目（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)

我已经对这两个选项进行了编码，到目前为止，我选择了第二个选择，因为它似乎更清晰，因为我不需要设置尽可能多的url作为我的侧边栏项目。此导航也感觉更快，因为只有部分网页被重新加载。

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

可能的解决方法是将其他文件中的javascript函数分开，并根据需要加载此文件，但这样做会很简单（至少要简单得多）才能让它立即运行。

提前致谢

Answer 1

javascript代码的上述问题可以通过简单地替换以下行来解决：

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

人：

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

我在相关帖子中找到了它：How to replace innerHTML of a div using jQuery?

这篇文章也可能有助于理解这两行之间的区别：JQuery html() vs. innerHTML

感谢。

Django导航：扩展与innerHTML

1 个答案: