create posts serially

app/components/post-creator.js

@@ -1,20 +1,33 @@
 import Component from "@ember/component";
 import { inject as service } from "@ember/service";
-import { task, all } from "ember-concurrency";
+import { task } from "ember-concurrency";
 
 export default Component.extend({
   store: service(),
 
   createPostsTask: task(function*() {
-    let posts = [1, 2, 3, 4].map(i =>
-      this.store.createRecord("post", {
-        title: `Title ${i}`,
-        body: `body ${i}`
-      })
-    );
+    let p1 = this.store.createRecord("post", {
+      title: `Title 1`,
+      body: `body 1`
+    });
+    yield p1.save();
 
-    yield all(posts.map(post => post.save()));
+    let p2 = this.store.createRecord("post", {
+      title: `Title 2`,
+      body: `body 2`
+    });
+    yield p2.save();
 
-    this.set("posts", posts);
+    let p3 = this.store.createRecord("post", {
+      title: `Title 3`,
+      body: `body 3`
+    });
+    yield p3.save();
+
+    let p4 = this.store.createRecord("post", {
+      title: `Title 4`,
+      body: `body 4`
+    });
+    yield p4.save();
   }).drop()
 });

app/routes/application.js

@@ -1,3 +1,7 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({});
+export default Route.extend({
+  model() {
+    return this.store.findAll("post");
+  }
+});

app/templates/application.hbs

@@ -1 +1,10 @@
 {{post-creator}}
+
+{{#each this.model as |post|}}
+  <div class="post">
+    <h1>{{post.title}}</h1>
+    <p>{{post.body}}</p>
+  </div>
+{{else}}
+  <p>no posts</p>
+{{/each}}

app/templates/components/post-creator.hbs

@@ -1,11 +1,3 @@
 <button {{action (perform this.createPostsTask)}}>Create Many Posts</button>
 {{#if this.createPostsTask.isRunning}}creating...{{/if}}
 
-{{#each this.posts as |post|}}
-  <div class="post">
-    <h1>{{post.title}}</h1>
-    <p>{{post.body}}</p>
-  </div>
-{{else}}
-  <p>no posts</p>
-{{/each}}