mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
5ef6774cd9
All reflected attributes two way bind on SkyElement, so now doing
<sky-element name="sky-input" attributes="value:string"> is enough
to get two way binding on the value attribute so users doing
<sky-input value="{{ inputValue }}"> will get the inputValue property
updated as the user types.
R=abarth@chromium.org, ojan@chromium.org
Review URL: https://codereview.chromium.org/850383002
50 lines
1.4 KiB
Plaintext
50 lines
1.4 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" />
|
|
<import src="/sky/framework/sky-checkbox/sky-checkbox.sky" />
|
|
|
|
<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>
|
|
<sky-checkbox id="checkbox" checked="{{ checked }}" />
|
|
</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>
|