Polymer core selector is not updated
The Dart code for my Polymer element looks like this:
@CustomTag('my-element') class MyElement extends PolymerElement { final List<String> colors = toObservable(['red', 'green', 'blue']); MyElement.created() : super.created(); }
And the HTML looks like this:
<polymer-element name="my-element"> <template> <style> .core-selected { font-weight: bold; } </style> <core-selector id="selector" selected="1"> <template repeat="{{color in colors}}"> <div value="{{color}}">{{color}}</div> </template> </core-selector> <hr> <!-- Prints the selected index, but does not update --> <div>{{$['selector'].selected]}}</div> </template> <script type="application/dart" src="my_element.dart"></script> </polymer-element>
Using <div>{{$['selector'].selected]}}</div>
correctly displays the index of the selected one color
, but choosing a different color does not update the value selected
. Am I using this correctly? Or is it a mistake?
+3
source to share
1 answer
I agree with this, but at the same time you can work around it like
<core-selector id="selector" selected="{{selected}}">
...
<div>{{selected}}</div>
with support code containing the obvious
@observable int selected = 1;
I'm wondering if your version works when used in a pure JS environment? But this is another question.
+1
source to share