Polymerエレメント、Jsonの読み込み

この記事は、「Google Material Design をPolymerで表現する」の連載記事です。
「Google Material Designとは」や、その他の関連記事は、下記より参照ください。

 

前回の記事で、「Polymerとは、Polymerのベーシックなテンプレート」を学びました。
今回は、Polymerのチュートリアルにも載っています、core-ajaxエレメントを読み込み、jsonを取得したいと思います。

Polymerを利用する上で、コンポーネントを使い回すのは基本の考えとなります。
その他にも多くのエレメントが用意されています。次回の記事でその他のエレメントも紹介いたします。

 

core-ajaxの利用

 

//core-ajaxエレメントを読み込みます
<link rel="import" href="./bower_components/core-ajax/core-ajax.html">

//core-ajaxエレメントを宣言し、jsonファイルを読み込みます。
<core-ajax auto
url="./simple.json"
response="{{views}}"></core-ajax>

//viewsに格納したjsonデータを出力します。
<h1>{{views[0].name}}</h1>

 

詳しいドキュメントはこちら。
http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax

 

Core-Ajaxのデモ

 

完成ファイル:

core-ajax.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Hello Core-Ajax</title>
    <script src="./bower_components/platform/platform.js"></script>
    <link rel="import" href="./core-ajax-component.html">
  </head>

<body>
<hoge-json></hoge-json>
</body>
</html>

 

core-ajax-component.html

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/core-ajax/core-ajax.html">

<polymer-element name="hoge-json" noscript>
  <template>
    <style>
    </style>
    <h1>core-ajax</h1>

    <core-ajax auto
      url="./simple.json"
      handleAs="json"
      response="{{views}}"></core-ajax>
 
    <h1>{{views[0].name}}</h1>

  </template>

</polymer-element>

 

simple.json

[{"name":"CPI太郎","age":37}]

 

このように、core-ajaxエレメントを読み込むことにより、外部ファイルからデータを取得することができます。
json以外にも、textや、xmlの読み込みも行えます。

 

次の記事は「Polymer Layoutエレメント」についてです。

 

 

その他の記事(今後の公開予定)

 

[Material Designについて]

  1. Material Designとは(Introduction)

[Polymerを使ってMaterial Designを表現する]

  1. Polymerとは、初めてのPolymer
  2. [エレメント]
    Polymerエレメント、Jsonの読み込み

    Polymer Layoutエレメント
    Polymer Iconエレメントと、スタイル
  3. Polymerを使って、Material Designを表現しよう

 

 
 
関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。