How can I include a jquerymobile navigation side panel in a django
template without breaking pageinit?
I am using JQuery mobile together with Django and am trying to find a
logical way to get the best of each system.
In my JQM project I am using a panel for navigation. I initially
structured my html base template as follows:
<body>
<div data-role="page" id = "main-page">
<div data-role="panel" id="left-panel">
<a data-role="button" href = "/home" >Home</a>
<a data-role="button" href = '/help'>Help</a>
</div>
{% block mainContent %}
{% endblock %}
</div>
</body>
However, I've found that this interferes with some of JQM's functions.
Specifically code contained within a pageinit in the html at any
urlendpoint (e.g. /help) fires on all other urlendpoints (e.g. /home) due
to, I assume, the ajax navigation. It would seem then that I would need to
do something as follows for the base template
<body>
{% block mainContent %}
{% endblock %}
</body>
and then within each page put the navigation panel
{% block mainContent %}
<div data-role="page" id = "home-page">
<div data-role="panel" id="left-panel">
<a data-role="button" href = "/home" >Home</a>
<a data-role="button" href = '/help'>Help</a>
</div>
<div data-role="header" style="overflow:hidden;">
</div>
<div data-role="content">
</div>
</div>
{% endblock %}
However the repetition of the side panel in each page is not really in
keeping with DRY. Is there a better logical structure that could be used?
No comments:
Post a Comment