Polymer core-ajax の使い方

     - プログラム言語  


Polymerのcore-ajaxの使い方。

まずは、index.html

[code language=”html” title=”index.html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="my-topics.html">
</head>
<body fullbleed vertical layout unresolved>
<my-topics></my-topics>
</body>
</html>
[/code]

my-topicsというCustom Elementに実際の処理を書く。JSONで、とあるサーバからデータを取得する、という想定。本当はJSONPで取りたかったんだけど、それは次回までの課題で…

[code language=”html” title=”my-topics.html”]
<polymer-element name="my-topics" attributes="">
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<template>
<core-ajax auto url="http://url.to.api/"
handleAs="json"
on-core-response="{{handleResponse}}"></core-ajax>
<table id="topics">
<tr template repeat="{{topic in topics}}">
<td><a href="{{topic.uri}}">{{topic.title}}</a></td>
</tr>
</table>
</template>
<script>
Polymer(‘my-topics’,{
handleResponse: function(ev,res){
this.topics = res.response;
}
});
</script>
</polymer-element>
[/code]

core-ajaxon-core-responseは、ajaxで取得でき時に呼ばれ関数を指定する。実際のレスポンスは、指定した関数の第2引数に格納される。実際の第1引数(ev)と第2引数(res)には次のような値が入る。

[code language=”javascript”]
>ev
CustomEvent {detail: Object, clipboardData: undefined, path: NodeList[12], cancelBubble: false, returnValue: true…}

>res
Object {response: Array[398], xhr: XMLHttpRequest}
[/code]


DACエンジニア採用情報

  関連記事

TypeScriptについてまとめてみた

はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何? TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …

no image
【未経験からのRuby on Rails – 第1回】楽しく書けるプログラミング言語 “Ruby” とは

こんにちは、はじめまして。新卒1年目のmatsuari(女子)です。 この度、Rubyの勉強を始めることになりまして、 まずはたくさんあるプログラミング言語の中で、なぜ自分がRubyを学ぶのか? しっかりと把握した上で学習に取り組んでいきたいと考え、『Rubyとは何か?』調べました。 超基礎的なこと …

初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今