DeLorean Tutorial

gistfile1.txt

document.getElementById('addItem').onclick = function () {
  ActionCreator.addItem();
};

var ActionCreator = {
  addItem: function () {
    // We'll going to call dispatcher methods.
    MyAppDispatcher.addItem({random: Math.random()});
  }
};

var MyAppDispatcher = DeLorean.Flux.createDispatcher({
  addItem: function (data) {
    this.dispatch('addItem', data);
  },

  getStores: function () {
    return {
      myStore: myStore
    }
  }
});


var MyAppStore = DeLorean.Flux.createStore({
  scheme: {
    list: {
      default: [],
      calculate: function (value) {
        return value.concat().map(function (item) {
          return 'ITEM: ' + item;
        });
      }
    }
  },
  actions: {
    // Remember the `dispatch('addItem')`
    'addItem': 'addItemMethod'
  },
  addItemMethod: function (data) {
    // It automatically emits change event.
    this.set('list', this.list.concat(data.random));
  }
});
var myStore = new MyAppStore();

var list = document.getElementById('list');

// Store emits the `change` event when changed.
myStore.onChange(function () {
  list.innerHTML = ''; // Best thing for this example.

  myStore.store.list.forEach(function (item) {
    var listItem = document.createElement('li');
    listItem.innerHTML = item;
    list.appendChild(listItem);
  });
});