0b73de95da
We were cloning elements with all the attributes that contained
expressions like attrName="{{ foo }}" which meant we'd go through the
reflection process converting that value and also call the
attrNameChanged() callback and the attributeChanged() with the braced
string which the element didn't really want to know about.
After this patch we create a "clone source node" which is a copy of the
original element without the attributes that have the expressions and
use that when cloning, then we assign the properties using data binding
later.
R=abarth@chromium.org, ojan@chromium.org
Review URL: https://codereview.chromium.org/868973002
88 lines
2.5 KiB
Plaintext
88 lines
2.5 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.
|
|
-->
|
|
<sky>
|
|
<import src="/sky/framework/sky-box/sky-box.sky"/>
|
|
<import src="/sky/framework/sky-button/sky-button.sky"/>
|
|
<import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/>
|
|
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
|
|
<import src="/sky/framework/sky-input.sky"/>
|
|
<import src="/sky/framework/sky-radio/sky-radio.sky"/>
|
|
<sky-element name="widget-root">
|
|
<template>
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
sky-checkbox {
|
|
margin: 5px;
|
|
}
|
|
.output {
|
|
margin-left: 48px;
|
|
}
|
|
</style>
|
|
|
|
<sky-box title='Text'>
|
|
<sky-input id="text" value="{{ inputValue }}" />
|
|
<div>value = {{ inputValue }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Buttons'>
|
|
<sky-button id='button' on-click='handleClick'>Button</sky-button>
|
|
<div>highlight: {{ myButton.highlight }}</div>
|
|
<div>clickCount: {{ clickCount }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Checkboxes'>
|
|
<div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
|
|
<div class="output">highlight: {{ myCheckbox.highlight }}</div>
|
|
<div class="output">checked: {{ myCheckbox.checked }}</div>
|
|
<div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
|
|
<div class="output">checked: {{ checked }}</div>
|
|
</sky-box>
|
|
|
|
<sky-box title='Radios'>
|
|
<sky-box title='Group One'>
|
|
<div><sky-radio group='foo'/>one</div>
|
|
<div><sky-radio group='foo' selected='true' />two</div>
|
|
<div><sky-radio group='foo'/>three</div>
|
|
</sky-box>
|
|
<sky-box title='Group Two'>
|
|
<div><sky-radio group='bar'/>A</div>
|
|
<div><sky-radio group='bar'/>B</div>
|
|
<div><sky-radio group='bar' selected='true' />C</div>
|
|
</sky-box>
|
|
</sky-box>
|
|
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.myButton = null;
|
|
this.myCheckbox = null;
|
|
this.myText = null;
|
|
this.clickCount = 0;
|
|
this.inputValue = "Ready";
|
|
this.checked = false;
|
|
}
|
|
attached() {
|
|
this.myButton = this.shadowRoot.getElementById('button');
|
|
this.myCheckbox = this.shadowRoot.getElementById('checkbox');
|
|
this.myText = this.shadowRoot.getElementById('text');
|
|
this.clickCount = 0;
|
|
}
|
|
handleClick(event) {
|
|
this.clickCount++;
|
|
this.checked = !this.checked;
|
|
this.inputValue = "Moar clicking " + this.clickCount;
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|
|
|
|
<widget-root />
|
|
</sky>
|