Merge pull request aurelia#435 from baerrach/plugins-store-two-way-bi…

…nding-and-state-management

Plugins store two way binding and state management

current/en-us/7. plugins/2. store.md

@@ -1020,14 +1020,14 @@ Yet exactly the later is what a two-way binding introduces if you bind your View
 
 ```JavaScript Using binding models instead of the state
 /*
-  * state: {
-  *  firstName: string,
-  *  lastName: string
-  * }
-  */
-
-// app.js
-...
+ * state: {
+ *  firstName: string,
+ *  lastName: string
+ * }
+ */
+import { inlineView } from 'aurelia-framework';
+import { inject } from 'aurelia-dependency-injection';
+import { Store } from 'aurelia-store';
 
 function updateUser(state, model) {
   return Object.assign({}, state, model);
@@ -1039,6 +1039,12 @@ function updateUser(state, model) {
     Firstname: <input type="text" value.bind="model.firstName">
     Lastname: <input type="text" value.bind="model.lastName">
     <button click.delegate="updateUser()">Update</button>
+    <div>
+      <b>Model</b> Firstname = '\${model.firstName}', Lastname = '\${model.lastName}'
+    </div>
+    <div>
+      <b>State</b> Firstname = '\${state.firstName}', Lastname = '\${state.lastName}'
+    </div>
   </template>
 `)
 export class App {
@@ -1060,15 +1066,17 @@ export class App {
 }
 ```
 ```TypeScript Using binding models instead of the state [variant]
+// app.ts
 /*
   * state: {
   *  firstName: string,
   *  lastName: string
   * }
   */
+import { inlineView } from 'aurelia-framework';
+import { autoinject } from 'aurelia-dependency-injection';
+import { Store } from 'aurelia-store';
 
-// app.ts
-...
 
 function updateUser(state: State, model: State) {
   return Object.assign({}, state, model);
@@ -1080,6 +1088,12 @@ function updateUser(state: State, model: State) {
     Firstname: <input type="text" value.bind="model.firstName">
     Lastname: <input type="text" value.bind="model.lastName">
     <button click.delegate="updateUser()">Update</button>
+    <div>
+      <b>Model</b> Firstname = '\${model.firstName}', Lastname = '\${model.lastName}'
+    </div>
+    <div>
+      <b>State</b> Firstname = '\${state.firstName}', Lastname = '\${state.lastName}'
+    </div>
   </template>
 `)
 export class App {