core-ajax-dartで記事の一覧を取得してrepeat機能で一行ずつ表示。
慣れない言語で、思いのほか右往左往。
でも、やっぱり動いてみると何てこと無いコードになる。
メインページのHTML
index.html
<html>
<head>
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<!-- 記事一覧用カスタムタグ -->
<link rel="import" href="my_topics.html">
</head>
<body>
<h1>記事一覧</h1>
<div>
<my-topics></my-topics>
</div>
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
<my-topics>が今回の記事一覧のカスタムタグ。
カスタムタグのHTML
my_topics.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_ajax_dart.html">
<polymer-element name="my-topics">
<template>
<link rel="stylesheet" href="my_topics.css">
<core-ajax-dart auto url="http://localhost:3000"
handleAs="json"
response="{{response}}"></core-ajax-dart>
<div>
<template repeat="{{response}}">
<div>{{this["title"]}}</div>
</template>
</div>
</template>
<script type="application/dart" src="my_topics.dart"></script>
</polymer-element>
<core-ajax-dart>を使ってみた。Polymerのcore-ajaxの説明はcore-ajaxを参照。
<template>の中に<template repeat="{{response}}">で繰り返しを実装。その中で値を参照する場合は{{this["title"]}}のようにHash値として考える。
カスタムタグのDart
my_topics.dart
import 'package:polymer/polymer.dart';
@CustomTag('my-topics')
class Topics extends PolymerElement {
@observable List<Map<String,dynamic>> response;
Topics.created() : super.created() {}
}
クラスは簡単で、JSONを受けるresponseを定義するだけ。
Dart初心者なので、これがDartらしいコードかどうか、未だ確信が持てないが、それなりにスッキリした形なので、一旦満足。