polymer-rest-template
Introduction
With polymer-rest-template, you can retrieve JSON from REST API, then apply variables in JSON into template.
For example,
<ul>
<rest-template src="https://api.github.com/search/repositories?q=user:phanect&sort=updated">
{{#each items}}
<li><a href="{{ html_url }}">{{ name }}</a></li>
{{/each}}
</rest-template>
</ul>URL specified in src attribute < https://api.github.com/search/repositories?q=user:phanect&sort=updated > returns something like this:
{
"items": [
{
"name": "restament",
"html_url": "https://github.com/phanect/restament"
},
{
"name": "polymer-rest-template",
"html_url": "https://github.com/phanect/polymer-rest-template"
},
{
"name": "phanective.org",
"html_url": "https://github.com/phanect/phanective.org"
}
]
}Above HTML with template produces following HTML:
<ul>
<rest-template src="https://api.github.com/search/repositories?q=user:phanect&sort=updated">
<li><a href="https://github.com/phanect/restament">restament</a></li>
<li><a href="https://github.com/phanect/polymer-rest-template">polymer-rest-template</a></li>
<li><a href="https://github.com/phanect/phanective.org">phanective.org</a></li>
</rest-template>
</ul>You can currently use handlebars as template language. I'm considering to support multiple template engines in the future, but currently not because of performance problem.
Install
$ bower install polymer-rest-templateI haven't registered this to Bower repository for now. I will register it when it is a little bit more stable.
You can also use npm, but it is experimental. Bower is recommended.
$ npm install --save polymer-rest-templateUsage
Load rest-template.html with <link rel=import>.
Be sure to load webcomponentsjs if your browser doesn't fully support web components (See webcomponents.org for current status)
<!DOCTYPE html>
<html>
<head>
<title>polymer-rest-template</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./bower_components/polymer-rest-template/rest-template.html">
</head>
<body>
<rest-template src="http://localhost/api/v1/something/1">
id: {{ id }}, description: {{ description }}
</rest-template>
</body>
</html>
