前回記事一覧の取得に成功したPolymer。

今回は記事件数をAjaxで変更できるようにしてみました。

１：大まかな動作

・inputで取得したい件数を入力する
・入力した件数分の記事をWP-APIから取得する
・inputのUIはMaterial Desginで実装する

ということでやってみました。

２：inputで取得したい件数を入力する

基本的にtemplate内であればinputのvalue値をそのまま扱える様子です。

[html]
<template>
<input type="text" value="{{query}}">
<p>{{query}}</p>
</template>
[/html]

ですのでcore-ajaxのurl部分を以下のように設定して、inputで入力した値を受け取るようにします。

[html]
<input type="text" value="{{query}}">
<core-ajax
auto
url="/wp-json/posts?filter[posts_per_page]={{query}}"
handleAs="json"
on-core-response="{{handleResponse}}"></core-ajax>
[/html]

core-ajaxをautoにしておくと、{{query}}の値が変更されたタイミングで再度Ajax通信を実施してくれます。

３：入力した件数分の記事をWP-APIから取得する

先ほどさらっと記述しましたが、WP-APIで記事件数を絞り込む場合「post_per_page」パラメータを使用します。

パラメータは「wp-json/」の後ろに「取得するタイプ?filter[パラメータ名]=値」のような形で取得できるみたいでした。

今回はパラメータ１つだけ、postから取得する形ですので「wp-json/posts?filter[posts_per_page]={{query}}」となります。

{{query}}部分に数字を入れることで指定した件数を常に取得するようにもできます。

その時毎回同じ内容を取得するのであれば、autoは無しにしても良いかもしれません。

４：inputのUIはMaterial Desginで実装する

せっかくPolymerを使用しているので、Material Designなフォームにスタイルを整えます。

例によってこれも実装は簡単で、Paper-inputというペーパーエレメントを使用するだけです。

Polymer paper elements：paper-input

以下の２行を先ほどinputタグを設置した箇所に設置することで実装できます。

[html]
<!– paper-inputをインポートする –>
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<!– inputタグを置換する–>
<paper-input label="ここにPlaceholdeテキスト" value="{{query}}"></paper-input>
[/html]

たったこれだけでinputタグがイカしたデザインになります。

５：まとめ

で、完成したのがこちら。

Polymer WebApp

今回のコード:テンプレート側

*スタイル部分や今回と関係のない部分をゴッソリ削ってます。
[html]
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<polymer-element name="get-json" attributes="url">
<template>
<paper-input label="How many posts do you want?" value="{{query}}"></paper-input>

<core-ajax url="{{url}}{{query}}" handleAs="json" auto response="{{cont}}"></core-ajax>
<template repeat="{{ent in cont}}">
<div class="post {{ent.ID}}" id="div">
<paper-shadow z="1">
<div class="post-inner">
<h1>{{ent.title}}</h1>
<a href="{{ent.link}}">元記事を見る</a>
</div>
</paper-shadow>
</div>
</template>
</div>
</template>
</polymer-element>
[/html]

今回のコード:本体側

*スタイル部分や今回と関係のない部分をゴッソリ削ってます。
[html]
<link rel="import" href="./elements/use-json/getjson-2.html">

<get-json url="https://wp-kyoto.cdn.rabify.me/wp-json/posts?filter[posts_per_page]="></get-json>
[/html]

６：この後できそうなこと

記事一覧を表示する際にトーストアニメーションをつけるとより、Material Designっぽさが出るかなと思います。

あとはinputの代わりにaタグか何かを使って記事一覧→記事詳細をAjaxでやることもできそうです。

他に気になる点はクエリパラメータを使うので、XSS対策しておかないといろいろとまずい予感がすることくらいでしょうか。。