DesignByOnyx · May 25, 2018 19:30 · May 25, 2018 · May 25, 2018 · May 25, 2018 · May 25, 2018
diff --git a/ylem-model.md b/ylem-model.md
@@ -38,17 +38,24 @@
         const { people } = this.props;
         <ul>
           {people.map(person => (
-            <li><Individual person={person} /></li>
+            <li key={person.id}><Individual person={person} /></li>
           ))}
         </ul>
       }
     };
 
-    export Default PersonList;
+    export { Individual, PersonList };
     ```
 
 3. Use the component like this, pass a query for filtering
 
       ```js
+      // Load a single person
+      <Individual query={{ id: 1234 }} />
+
+      // Load a list of people
       <PersonList query={{ age: { $gt: 27 } }} />
+
+      // Pass data directly to bypass loading data:
+      <Individual person={{ name: 'Justin', age: 35 }} />
       ```
diff --git a/ylem-model.md b/ylem-model.md
@@ -4,6 +4,7 @@
     import { Model,  transport } from 'ylem-model';
 
     const Person = Model({
+      id: { type: 'number', identity: true },
       name: { type: 'string' },
       email: { type: 'string' },
       age: { type: 'number' },

diff --git a/ylem-model.md b/ylem-model.md
@@ -14,15 +14,21 @@
     });
     ```
 
-2. Use the DataProvider component to provide data to your components:
+2. Use the dataProvider to provide data to your components.
+
+    ```js
+    dataProvider(Model, property, Component);
+    ```
+
+    The dataProvider generates a HoC which will load data (using an optional query) and provide the results to the underlying component. The results will be exposed on the "property" specifed (the second param to the `dataProvider` function). The intermediate states are handled for you (loading, error, no data). The underlying component is only rendered when the data loads successfully.
 
     ```js
     import React from 'react';
     import { dataProvider } from 'ylem-model';
     import Person from './person';
 
-    const Person = dataProvider(Person, 'person', ({ person }) => {
-        return <li>{person.name} is {person.age} years old.</li>;
+    const Individual = dataProvider(Person, 'person', ({ person }) => {
+        return <div>{person.name} is {person.age} years old.</div>;
     });
 
     @dataProvider(Person, 'people')
@@ -31,7 +37,7 @@
         const { people } = this.props;
         <ul>
           {people.map(person => (
-            <Person person={person} />
+            <li><Individual person={person} /></li>
           ))}
         </ul>
       }

diff --git a/ylem-model.md b/ylem-model.md
@@ -20,14 +20,18 @@
     import React from 'react';
     import { dataProvider } from 'ylem-model';
     import Person from './person';
+    
+    const Person = dataProvider(Person, 'person', ({ person }) => {
+        return <li>{person.name} is {person.age} years old.</li>;
+    });
 
     @dataProvider(Person, 'people')
     class PersonList extends React.Component {
       render() {
         const { people } = this.props;
         <ul>
           {people.map(person => (
-            <li>{person.name} is {person.age} years old.</li>
+            <Person person={person} />
           ))}
         </ul>
       }

diff --git a/ylem-model.md b/ylem-model.md
@@ -38,6 +38,6 @@
 
 3. Use the component like this, pass a query for filtering
 
-  ```js
-  <PersonList query={{ age: { $gt: 27 } }} />
-  ```
+      ```js
+      <PersonList query={{ age: { $gt: 27 } }} />
+      ```
diff --git a/ylem-model.md b/ylem-model.md
@@ -36,7 +36,7 @@
     export Default PersonList;
     ```
 
-And use the component like this:
+3. Use the component like this, pass a query for filtering
 
   ```js
   <PersonList query={{ age: { $gt: 27 } }} />

diff --git a/ylem-model → ylem-model.md b/ylem-model → ylem-model.md
@@ -12,7 +12,7 @@
     export default transport(Person, {
       url: '/api/person'
     });
-```
+    ```
 
 2. Use the DataProvider component to provide data to your components:
 

diff --git a/ylem-model b/ylem-model
@@ -0,0 +1,43 @@
+1. Define your models with a transport (this is just sugar for can-connect)
+
+    ```js
+    import { Model,  transport } from 'ylem-model';
+
+    const Person = Model({
+      name: { type: 'string' },
+      email: { type: 'string' },
+      age: { type: 'number' },
+    });
+
+    export default transport(Person, {
+      url: '/api/person'
+    });
+```
+
+2. Use the DataProvider component to provide data to your components:
+
+    ```js
+    import React from 'react';
+    import { dataProvider } from 'ylem-model';
+    import Person from './person';
+
+    @dataProvider(Person, 'people')
+    class PersonList extends React.Component {
+      render() {
+        const { people } = this.props;
+        <ul>
+          {people.map(person => (
+            <li>{person.name} is {person.age} years old.</li>
+          ))}
+        </ul>
+      }
+    };
+
+    export Default PersonList;
+    ```
+
+And use the component like this:
+
+  ```js
+  <PersonList query={{ age: { $gt: 27 } }} />
+  ```
No results found