mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00

History

Elliott Sprehn b3400475d5 Make SkyElement more classy.

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

2014-12-16 16:28:28 -08:00

inspector

Populate scope sections with variable name/values

2014-11-27 21:00:06 +03:00

sky-element

Make SkyElement more classy.

2014-12-16 16:28:28 -08:00

dom-serializer.sky

Use a JS markup serializer.

2014-12-02 10:09:35 -08:00

README.md

Replace <link rel="import"> with <import>

2014-11-03 12:34:57 -08:00

shell.sky

Replace <link rel="import"> with <import>

2014-11-03 12:34:57 -08:00

xmlhttprequest.sky

Add POST support to XHR as well as .status and statusText support

2014-12-16 11:20:40 -08:00

README.md

SkyElement

SkyElement is the framework for creating...yup...Sky Elements. It take heavy inspriation from Polymer and isn't very fully featured...yet

Declaring an element

<import src="../path/to/sky-element.sky" as="SkyElement" />
<template>
  <my-other-element>Hello, {{ place }}</my-other-element>
</template>
<script>
// SkyElement takes a single object as it's only parameter
SkyElement({
  name: 'my-element', // required. The element's tag-name
  attached: function() {
    this.place = 'World';
  }, // optional
  detached: function() {}, // optional
  attributeChanged: function(attrName, newValue, oldValue) {} // optional
});
</script>

Note that an element's declared ShadowDOM is the previous <template> element to the <script> element which defines the element.

Databinding

SkyElement's databinding support is derived from Polymer's. At the moment, there are some key differences:

There is not yet support for

Declarative event handlers
Inline expressions
Self-observation (e.g. fooChanged() gets invoked when this.foo is changed)
Computed properties (e.g. the computed block)
Conditional attributes (e.g. <my-foo checked?="{{ val }}")

Also, because there are so few built-in elements in Sky, the default behavior of HTMLElement with bindings is to assign to the property. e.g.

<my-foo bar="{{ bas }}">

Will not setAttribute on the my-foo, instead it will assign to the bar property of my-foo. There are two exceptions to this: class & style -- those stillsetAttribute.