mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
0a258c1921
Now instead of calling addEventListener inside the created() callback you just
add on-{eventName} attributes to the <sky-element> around your element
definition. The attribute defines what method on your element to call when the
event with {eventName} is dispatched through your element.
Implementing this required refactoring how sky-element.sky stored information
from each registered element. Now instead of storing just a map of templates
we store a map of ElementRegistration objects which have metadata about the
element. Future patches will combine this system with the element registration
system in sky-binder.
R=ojan@chromium.org
Review URL: https://codereview.chromium.org/845283003
48 lines
1.3 KiB
Plaintext
48 lines
1.3 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="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
|
|
|
|
<sky-element
|
|
name="test-element"
|
|
attributes="size:number, checked:boolean,name:string"
|
|
on-host-event="handleEvent">
|
|
<template>
|
|
<div id="inside" on-test-event="handleEvent" lang="{{ value }}">{{ value }}</div>
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.lastEvent = null;
|
|
this.value = 10;
|
|
this.shadowRootReadyCount = 0;
|
|
this.changes = [];
|
|
}
|
|
handleEvent(event) {
|
|
this.lastEvent = event;
|
|
}
|
|
shadowRootReady() {
|
|
this.shadowRootReadyCount++;
|
|
}
|
|
sizeChanged(oldValue, newValue) {
|
|
this.recordAttributeChange('size', oldValue, newValue);
|
|
}
|
|
checkedChanged(oldValue, newValue) {
|
|
this.recordAttributeChange('checked', oldValue, newValue);
|
|
}
|
|
nameChanged(oldValue, newValue) {
|
|
this.recordAttributeChange('name', oldValue, newValue);
|
|
}
|
|
recordAttributeChange(name, oldValue, newValue) {
|
|
this.changes.push({
|
|
name: name,
|
|
newValue: newValue,
|
|
oldValue: oldValue,
|
|
});
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|