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エンジニア採用情報

  関連記事

Scala実践「Either型を使ってimmutable(不変)なコードを書こう!」

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Scalaでイケてるコードを書きたい! 背景 わたくしはDACに入社してからScala …

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

こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今回は業務とは全く関係ないプログラミングをやってみました。 全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。 初心者の目線から作成方法をつらつ …

Scala入門 基礎編「Scalaの書き方を理解しよう」 – PHP使いからScala使いへ転身!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、今回はScala入門第二弾として、Scalaの書き方を紹介する基礎編をお送りしま …

(社内新卒・PHPビギナー向け)MacでPHP7開発環境を構築しよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 えっ!?新卒のプログラミング研修はPHPで行われるって?!俺の得意言語やないか!! は …

【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …

iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

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

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

no image
【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 [code language=”javascript” …

【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …