Data APIでテンプレートタグの値を使うプラグイン(その3・JavaScriptでの利用)

Data APIにはJavaScriptのライブラリがあり、Webページから比較的簡単にData APIにアクセスすることができます。
テンプレートタグの値を使うプラグインを使う場合も、JavaScriptでアクセスすることができます。
その方法を解説します。

1.パラメータに「rebuildTemplateName: テンプレート名」を付加

JavaScriptでData APIにアクセスする場合、個々のエンドポイントに対応するメソッドで、パラメータを表すオブジェクトを渡すことができます。
そのオブジェクトに、「rebuildTemplateName」のプロパティを作り、それでテンプレート名を指定するようにします。

例えば、listEntriesメソッドで、記事を取得するとします。
この場合、以下のようなコードを書くことで、得た個々の記事に対して「DataAPI Entry」というテンプレートを再構築し、その結果も合わせて得ることができます。 

api = new MT.DataAPI({
  baseUrl:  'http://your-host/path-to-mt/mt-data-api.cgi',
  clientId: 'example',
});
var params = {
  rebuildTemplateName: 'DataAPI Entry'
};
api.listEntries(siteId, params, function(response) {
  if (response.error) {
    エラー時の処理
  }
  読み込んだ記事に関する処理
});

2.結果を扱う

再構築で得られた値は、個々の記事等のオブジェクトの「rebuildResult」というプロパティに保存されます。
このプロパティの配下に、テンプレート側で指定した変数名と同じプロパティが作られます。

例えば、昨日の記事のように、前後の記事のアドレスを、previous_link／next_linkという変数に代入したとします。
この場合、個々の記事のオブジェクトに以下のようなプロパティが作られ、そこから前後の記事のアドレスを得ることができます。

プロパティ値
rebuildResult.previous_link前の記事のアドレス
rebuildResult.next_link次の記事のアドレス

3.事例

上で示したように、listEntriesメソッドで記事を得る際に、前後の記事のアドレスも合わせて得たとします。
この場合、記事一覧をul／li要素のリストで出力し、かつ個々の記事の前後のアドレスも出力するには、以下のようなJavaScriptのコードを実行します。 

api = new MT.DataAPI({
  baseUrl:  'http://your-host/path-to-mt/mt-data-api.cgi',
  clientId: 'example',
});
var params = {
  rebuildTemplateName: 'DataAPI Entry'
};
api.listEntries(siteId, params, function(response) {
  if (response.error) {
    alert('エラー');
  }
  var entries = response.items;
  var html = '<ul>';
  for (var i = 0, j = entries.length; i < j; i++) {
    var entry = entries[i];
    var rebuildResult = entry.rebuildResult;
    html += '<li>' + entry.title;
    if (rebuildResult.previous_link ||
        rebuildResult.next_link) {
      html += '<ul>';
      if (rebuildResult.previous_link) {
        html += '<li><a href="' + rebuildResult.previous_link + '">前の記事</a></li>';
      }
      if (rebuildResult.next_link) {
        html += '<li><a href="' + rebuildResult.next_link + '">次の記事</a></li>';
      }
      html += '</ul>';
    }
  }
  html += '</ul>';
  jQuery('#entries').html(html);
});