Merge pull request #94 from andreip/master

Update tutorial.md and code from tutorial/ for new delorian.js
f · Mar 16, 2016 · f0dc059 · f0dc059
2 parents 7874c7a + be85784
commit f0dc059
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/docs/tutorial.md b/docs/tutorial.md
@@ -11,8 +11,8 @@ First of all, let's create the DOM (view) we'll need.
     <script src="https://cdn.rawgit.com/deloreanjs/delorean/master/dist/delorean.min.js"></script>
   </head>
   <body>
-    <ul id="list"></ul>
     <button id="addItem">Add Random Item</button>
+    <ul id="list"></ul>
 
     <script src="js/app.js"></script>
   </body>
@@ -90,7 +90,7 @@ with arguments.
 Also you have to call `this.emit('change')` when you update your data.
 
 ```javascript
-var MyAppStore = DeLorean.Flux.createStore({
+var myStore = DeLorean.Flux.createStore({
   list: [],
   actions: {
     // Remember the `dispatch('addItem')`
@@ -103,9 +103,10 @@ var MyAppStore = DeLorean.Flux.createStore({
     this.emit('change');
   }
 });
-var myStore = new MyAppStore();
 ```
 
+Make sure you put this code before the one from step 2 though, because we were using `myStore` in creating the `MyAppDispatcher`, and that will keep a reference to the store internally.
+
 ### Step 4: Completing the Cycle: Views
 
 Now everything seems okay, but **we didn't completed the cycle yet**.
@@ -117,7 +118,7 @@ var list = document.getElementById('list');
 myStore.onChange(function () {
   list.innerHTML = ''; // Best thing for this example.
 
-  myStore.store.list.forEach(function (item) {
+  myStore.list.forEach(function (item) {
     var listItem = document.createElement('li');
     listItem.innerHTML = item;
     list.appendChild(listItem);

diff --git a/examples/tutorial/index.html b/examples/tutorial/index.html
@@ -4,8 +4,8 @@
     <script src="http://rawgit.com/f/delorean/master/dist/delorean.min.js"></script>
   </head>
   <body>
-    <ul id="list"></ul>
     <button id="addItem">Add Random Item</button>
+    <ul id="list"></ul>
 
     <script src="js/app.js"></script>
   </body>

diff --git a/examples/tutorial/js/app.js b/examples/tutorial/js/app.js
@@ -9,7 +9,7 @@ var ActionCreator = {
   }
 };
 
-var MyAppStore = DeLorean.Flux.createStore({
+var myStore = DeLorean.Flux.createStore({
   list: [],
   actions: {
     // Remember the `dispatch('addItem')`
@@ -22,7 +22,6 @@ var MyAppStore = DeLorean.Flux.createStore({
     this.emit('change');
   }
 });
-var myStore = new MyAppStore();
 
 var MyAppDispatcher = DeLorean.Flux.createDispatcher({
   addItem: function (data) {
@@ -42,7 +41,7 @@ var list = document.getElementById('list');
 myStore.onChange(function () {
   list.innerHTML = ''; // Best thing for this example.
 
-  myStore.store.list.forEach(function (item) {
+  myStore.list.forEach(function (item) {
     var listItem = document.createElement('li');
     listItem.innerHTML = item;
     list.appendChild(listItem);