firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add two way data binding.

Browse Source 
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
This commit is contained in:
Elliott Sprehn 2015-01-15 15:03:44 -08:00
parent ed73bbb5ee
commit b9aac0ada7
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
examples/widgets/index.sky
View File

@ -25,7 +25,10 @@
} }
</style> </style>
<sky-input id="text" value="Ready" /> <sky-box title='Text'>
<sky-input id="text" value="{{ inputValue }}" />
<div>value = {{ inputValue }}</div>
</sky-box>
<sky-box title='Buttons'> <sky-box title='Buttons'>
<sky-button id='button' on-click='handleClick'>Button</sky-button> <sky-button id='button' on-click='handleClick'>Button</sky-button>
@ -37,7 +40,8 @@
<div><sky-checkbox id='checkbox' />Checkbox</div> <div><sky-checkbox id='checkbox' />Checkbox</div>
<div class="output">highlight: {{ myCheckbox.highlight }}</div> <div class="output">highlight: {{ myCheckbox.highlight }}</div>
<div class="output">checked: {{ myCheckbox.checked }}</div> <div class="output">checked: {{ myCheckbox.checked }}</div>
<div><sky-checkbox id='checkbox' checked='true'/>Checkbox, default checked.</div> <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox, default checked.</div>
<div class="output">checked: {{ checked }}</div>
</sky-box> </sky-box>
<sky-box title='Radios'> <sky-box title='Radios'>
@ -61,6 +65,8 @@ module.exports = class extends SkyElement {
this.myCheckbox = null; this.myCheckbox = null;
this.myText = null; this.myText = null;
this.clickCount = 0; this.clickCount = 0;
this.inputValue = "Ready";
this.checked = false;
} }
attached() { attached() {
this.myButton = this.shadowRoot.getElementById('button'); this.myButton = this.shadowRoot.getElementById('button');
@ -70,7 +76,8 @@ module.exports = class extends SkyElement {
} }
handleClick(event) { handleClick(event) {
this.clickCount++; this.clickCount++;
this.myText.value = "Moar clicking " + this.clickCount; this.checked = !this.checked;
this.inputValue = "Moar clicking " + this.clickCount;
} }
}.register(); }.register();
</script> </script>