examples/backbone.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Backbone.js Flux Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          .component {
            border: 1px dotted red;
            margin: 5px 0;
            padding: 5px;
          }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
        <script src="../src/flux.backbone.js"></script>

        <script>
          /*global Flux*/

          var ADD_PERSON = 'ADD_PERSON';
          var STORE_UPDATED = 'STORE_UPDATED';

          window.FluxForBackbone = {
            Models: {},
            Collections: {},
            Views: {},
            Routers: {},
            Stores: {},
            Dispatcher: new Flux.Dispatcher(),
            init: function() {
              'use strict';

              var router = new FluxForBackbone.Routers.Main();

              var started = Backbone.history.start({
                pushState: false
              });

              if (!started) {
                throw 'Failed';
              }
            }
          };

          $(document).ready(function() {
            'use strict';

            FluxForBackbone.Models.Person = Backbone.Model.extend();

            FluxForBackbone.Stores.Persons = new Flux.Store({
              initialize: function() {
                var store = this;

                // notify this store's listeners on updates
                store.items.on('all', function() {
                  store.emit(new Flux.Action(STORE_UPDATED));
                });

                // listen for dispatcher, whenever person added event is triggered
                FluxForBackbone.Dispatcher.on(ADD_PERSON, function(name) {
                  store.addItem(new FluxForBackbone.Models.Person({name: name}));
                })
              }
            });

            FluxForBackbone.Views.Form = Backbone.View.extend({
              template: _.template($('#form-template').html()),
              el: $('#form-container'),

              events: {
                'click button#add-person': 'addPerson',
              },

              initialize: function() {
              },

              addPerson: function() {
                FluxForBackbone.Dispatcher.trigger(ADD_PERSON, this.$el.find('#person-name').val());
              },

              render: function() {
                this.$el.html(this.template());
                return this;
              }
            });

            FluxForBackbone.Views.Result = Backbone.View.extend({
              template: _.template('Persons added: <%= persons %>'),
              el: $('#result-container'),

              initialize: function() {
                var that = this;

                FluxForBackbone.Stores.Persons.addListener(function(action) {
                  switch (action.type) {
                    case STORE_UPDATED:
                      that.render();
                      break;
                  }
                });
              },

              render: function() {
                this.$el.html(this.template({
                  persons: JSON.stringify(FluxForBackbone.Stores.Persons.getItems())
                }));
                return this;
              }
            });

            FluxForBackbone.Views.Count = Backbone.View.extend({
              template: _.template($('#count-template').html()),
              el: $('#count-container'),

              initialize: function() {
                var that = this;
                FluxForBackbone.Stores.Persons.addListener(function(action) {
                  switch (action.type) {
                    case STORE_UPDATED:
                      that.render();
                      break;
                  }
                });
              },

              render: function() {
                this.$el.html(this.template({
                  count: FluxForBackbone.Stores.Persons.getItems().length
                }));
                return this;
              }
            });

            FluxForBackbone.Routers.Main = Backbone.Router.extend({
              routes: {
                '': 'frontpage'
              },

              frontpage: function() {
                var formView = new FluxForBackbone.Views.Form();
                var resultView = new FluxForBackbone.Views.Result();
                var countView = new FluxForBackbone.Views.Count();

                formView.render();
                resultView.render();
                countView.render();
              },
            });

            FluxForBackbone.init();
          });
        </script>
    </head>
    <body>
      <script type="text/template" id="form-template">
        <label for="person-name">Name</label><input name="name" type="text" id="person-name">
        <button id="add-person">
          Add person!
        </button>
      </script>

      <script type="text/template" id="count-template">
        Total persons: <%= count %>
      </script>

      <div id="form-container" class="component"></div>
      <div id="result-container" class="component"></div>
      <div id="count-container" class="component"></div>
    </body>
</html>