5f6c32c247
The syntax for implementing a SkyElement is now:
<sky-element name="element-name">
<template>
<!-- template here -->
</template>
<script>
module.exports = class extends SkyElement {
attached() {
// ...
}
// .. methods here ..
}.register();
</script>
</sky-element>
The register() static method on SkyElement subclasses calls
document.registerElement() and returns the generated constructor.
It uses the parent <sky-element>'s name attribute to set the name
of the element.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/788943003
45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
<!--
|
|
// Copyright 2014 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
-->
|
|
<import src="../framework/sky-element/sky-element.sky" as="SkyElement" />
|
|
<import src="../framework/xmlhttprequest.sky" as="XMLHttpRequest" />
|
|
|
|
<sky-element name="file-browser">
|
|
<template>
|
|
<style>
|
|
heading {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
<heading>File browser for {{ url }}</heading>
|
|
<template repeat="{{ directories }}">
|
|
<a href="{{}}">{{}}</a>
|
|
</template>
|
|
<template repeat="{{ files }}">
|
|
<a href="{{}}">{{}}</a>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.url = '';
|
|
this.files = [];
|
|
this.directories = [];
|
|
}
|
|
attached() {
|
|
this.url = this.ownerDocument.URL;
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', this.url + '?format=json');
|
|
xhr.onload = (function() {
|
|
var listing = JSON.parse(xhr.responseText);
|
|
this.files = listing.files;
|
|
this.directories = listing.directories;
|
|
}).bind(this);
|
|
xhr.send();
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|