STEP7: REST API で Update

このステップでは、REST API経由でブックマーク情報を更新する方法および、MeteorクライアントからAPI経由でブックマーク情報を更新する方法について学びます。

7.1 ブックマーク更新API実装

前のステップで新規ブックマークを作成できるようになりました。

今度は、ブックマーク情報を更新するAPIを実装してきましょう。

ソースコードを以下のように修正してください。

imports/api/rest.js

// ...省略

Api.addRoute('bookmarks/:id', { 
  // GET /api/bookmarks/:id
  get: { 
    // ...省略
  },
  // PUT /api/bookmarks/:id
  put: { 
    action: function() { 
      const bookmarkId = this.urlParams.id;
      const { url, title } = this.bodyParams; 
      Bookmarks.update(bookmarkId, { $set: { url, title }}); 
      return { 
        status: 'success', 
        data: Bookmarks.findOne(bookmarkId), 
      };
    }, 
  },
});

export default Api;

変更を保存したら、ターミナルで以下のコマンドを実行します。

curl -X PUT http://localhost:3000/api/bookmarks/<ブックマークID> -d "url=<ブックマークURL>" -d "title=<ブックマークタイトル>"

<ブックマークID>, <ブックマークURL>, <ブックマークタイトル>は各自書き換えて下さい。

実行例:

$ curl -X PUT http://localhost:3000/api/bookmarks/4BBv9JQ4dxJtvMC7X -d "url=http://localhost:3000/" -d "title=localhost"
{ 
  "status": "success", 
  "data": { 
    "_id": "4BBv9JQ4dxJtvMC7X", 
    "url": "http://localhost:3000/", 
    "title": "localhost", 
    "createdAt": "2016-07-22T23:24:39.176Z" 
  }
}

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step7.1

7.2 ブックマーク更新フォーム作成

続いて、ブックマーク更新フォームを実装していきましょう。

ソースコードを以下のように書き換えます。

client/main.html

<!-- 省略 -->

<template name="Bookmarks"> 
  <!-- 省略 -->
</template>

<!-- 変更 -->
<template name="Bookmark">
  <li class="list-group-item"> 
    <a href="{{bookmark.url}}" target="_blank"> 
      <span class="bookmark-title">{{bookmark.title}}</span> 
      <span class="bookmark-url">{{bookmark.url}}</span> 
      {{#unless isEditMode}}
        <button class="btn btn-xs btn-default btn-bookmark-edit js-edit-bookmark">Edit</button> 
      {{/unless}} 
    </a>
   {{#if isEditMode}} 
     {{> BookmarkForm bookmark=bookmark callbacks=callbacks}} 
   {{/if}} 
  </li>
</template>

<!-- 変更　-->
<template name="BookmarkForm">
  <form class="form-inline bookmark-form {{#if bookmark}}is-edit{{else}}is-new{{/if}}"> 
    {{#if bookmark}} 
      <input type="hidden" name="_id" value="{{bookmark._id}}" /> 
    {{/if}} 
    <div class="form-group"> 
      <label for="url">URL</label> 
      <input type="url" class="form-control" id="url" name="url" placeholder="http://..." value="{{bookmark.url}}"/>
    </div>
    <div class="form-group">
      <label for="title">Title</label> <input type="text" class="form-control" id="title" name="title" value="{{bookmark.title}}" />
    </div>
    <button type="submit" class="btn btn-default"> 
      {{#if bookmark}}Update{{else}}Add{{/if}} 
    </button> 
  </form>
</template>

client/main.js

// ...省略

// 追加
Template.Bookmark.onCreated(function() { 
  this.isEditMode = new ReactiveVar(false);
});

// 追加
Template.Bookmark.helpers({ 
  isEditMode: () => Template.instance().isEditMode.get(), 
  callbacks: () => { 
    const inst = Template.instance(); 
    return { 
      onUpdate: () => inst.isEditMode.set(false), 
    }; 
  },
});

// 追加
Template.Bookmark.events({ 
  'click .js-edit-bookmark'(event, inst) { 
    event.preventDefault(); 
    inst.isEditMode.set(true); 
  }
});

Template.BookmarkForm.events({ 
  // 変更(キーに.is-newを付加)
  'submit .bookmark-form.is-new'(event) { 
    // ...省略
  }, 
  // 追加
  'submit .bookmark-form.is-edit'(event, inst) { 
    event.preventDefault();
    const _id = event.target._id.value; 
    const url = event.target.url.value; 
    const title = event.target.title.value; 
    const callOptions = {data: {url, title}};

    HTTP.put(`/api/bookmarks/${_id}`, callOptions, (err, res) => { 
      if (err) { console.log(err); return; } 
      this.callbacks.onUpdate(); 
    }); 
  },
});

NOTE: HTTP.put() で指定したリソースに対してPUTリクエストを実行します。

変更を保存したら、ブラウザで挙動を確認してみましょう。

これでブックマーク情報の更新ができるようになりました。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step7.2

次のステップに進みましょう。