Basic framework for serving a single-page application through Django through Django REST Framework with a front-end setup using Sammy.js for routes and Knockout.js and Require.js to structure ViewModels.
Install the package via pip
:
pip install -e git+https://github.com/garromark/django-spa.git@master#egg=django-spa
The SPA framework provides a base theme that should be extended to utilize the Knockout App Framework.
Here's an example of a custom theme file that extends the provided base theme:
{% extends "spa_theme/base.html" %}
{% block js_settings %}
<script type="text/javascript">
var _baseAppViewModel = "viewmodels/baseViewModel";
</script>
{% endblock %}
{% block js %}{% endblock %}
The global Javascript variable _baseAppViewModel
is used to allow you to declare the base Knockout-based ViewModel that will be bound to the page. The path of this application is assumed to be under the js/
directory of a staticfiles directory. The defined ViewModel should extend the viewmodels/appViewModel
provided by the SPA framework.
Here is an example of a basic baseViewModel
:
// define a super-class for the application
// Will use the SPA app as a mixin
define(["viewmodels/appViewModel",
"viewmodels/gameViewModel"],
function(appViewModel) {
var baseAppSingleton = function() {
var self = $.extend(this, appViewModel);
self.init = function() {
}
self.init();
}
return new baseAppSingleton();
}
);
Create a project-specific settings files that extends the common settings file:
spa.config.settings
Also, do so for one or more of the following settings files depending on your environments:
spa.config.environments.development
spa.config.environments.staging
spa.config.environments.production
You'll need to point the SPA Framework toward the base theme for your project using SPA_BASE_THEME
. You should also remember to extend variables that are previously defined by SPA configuration files.
Here's a basic common settings file for a project:
from spa.config.settings import *
from path import path
PROJECT_ROOT = path(__file__).abspath().dirname().dirname()
SPA_BASE_THEME = "my_theme/base.html"
STATICFILES_DIRS += (
PROJECT_ROOT / "static",
)
TEMPLATE_DIRS += (
PROJECT_ROOT / "templates",
)