{% extends "subscribe-form.html" %} {% load static sekizai_tags tutorial_tags %} {% block form_title %}Django Forms with three-way data-binding{% endblock %} {% block addtoblock %} {{ block.super }} {% addtoblock "js" %}{% endaddtoblock %} {% add_data "ng-requires" "djng.websocket" %} {% addtoblock "ng-config" %}['djangoWebsocketProvider', function(djangoWebsocketProvider) { djangoWebsocketProvider.setURI('{{ WEBSOCKET_URI }}'); djangoWebsocketProvider.setLogLevel('debug'); djangoWebsocketProvider.setHeartbeat({{ WS4REDIS_HEARTBEAT }}); }]{% endaddtoblock %} {% endblock addtoblock %} {% block main-intro %}
Point a second browser onto the same URL and observe form synchronization
This example shows, how to propagate the form's model-scope to a foreign browser using Websockets.
{% endblock main-intro %} {% block form_tag %}ng-model-options="{allowInvalid: true}" novalidate ng-controller="MyWebsocketCtrl"{% endblock %} {% block form_foot %} {% verbatim %}MyWebsocketCtrl
's scope:subscribe_data = {{ subscribe_data | json }}{% endverbatim %} {% endblock %} {% block form_submission %}{% endblock %} {% block main-tutorial %}
With django-angular and the additional Django app django-websocket-redis, one can extend two-way data-binding to propagate all changes on a model, back and forward with a corresponding object stored on the server. This means, that the server “sees” whenever the model changes on the client and can by itself, modify values on the client side at any time, without having the client to poll for new messages.
This can be useful, when the server wants to inform the clients about asynchronous events such as sport results, chat messages or multi-player game events.
In this example no submit buttons are available, because the server receives the Form's data on
every change event. Apart from initializing the angular module, the only JavaScript code required
for this example, is the statement djangoWebsocket.connect
, which bi-directionally
binds the object subscribe_data
from our Controller's $scope
object, to an
equally named data bucket inside the remote Redis datastore.
Note that AngularJS directives are configured inside HTML, since only Django templates can expand server variables.
{% endblock main-sample-code %}