OLD | NEW |
| (Empty) |
1 SkyElement | |
2 === | |
3 | |
4 SkyElement is the framework for creating...yup...Sky Elements. It take heavy | |
5 inspriation from [Polymer](www.polymer-project.org) and isn't very fully | |
6 featured...yet | |
7 | |
8 Declaring an element | |
9 -------- | |
10 ```HTML | |
11 <import src="../path/to/sky-element.sky" as="SkyElement" /> | |
12 <template> | |
13 <my-other-element>Hello, {{ place }}</my-other-element> | |
14 </template> | |
15 <script> | |
16 // SkyElement takes a single object as it's only parameter | |
17 SkyElement({ | |
18 name: 'my-element', // required. The element's tag-name | |
19 attached: function() { | |
20 this.place = 'World'; | |
21 }, // optional | |
22 detached: function() {}, // optional | |
23 attributeChanged: function(attrName, newValue, oldValue) {} // optional | |
24 }); | |
25 </script> | |
26 ``` | |
27 | |
28 Note that an element's declared ShadowDOM is the previous `<template>` | |
29 element to the `<script>` element which defines the element. | |
30 | |
31 Databinding | |
32 -------- | |
33 SkyElement's databinding support is derived from Polymer's. At the moment, | |
34 there are some key differences: | |
35 | |
36 There is not yet support for | |
37 * Declarative event handlers | |
38 * Inline expressions | |
39 * Self-observation (e.g. `fooChanged()` gets invoked when `this.foo` is changed
) | |
40 * Computed properties (e.g. the computed block) | |
41 * Conditional attributes (e.g. `<my-foo checked?="{{ val }}"`) | |
42 | |
43 Also, because there are so few built-in elements in Sky, the default behavior | |
44 of HTMLElement with bindings is to assign to the property. e.g. | |
45 | |
46 ```HTML | |
47 <my-foo bar="{{ bas }}"> | |
48 ``` | |
49 | |
50 Will not `setAttribute` on the `my-foo`, instead it will assign to the `bar` | |
51 property of `my-foo`. There are two exceptions to this: `class` & `style` -- | |
52 those still`setAttribute`. | |
OLD | NEW |