Wie erhalten Sie ausgewählte Option innerhalb DOM-Wiederholungsvorlage in Dart?

Question

Ich laufe auf Problem, wenn versucht wird, den geänderten Wert von <select> Elemente innerhalb <dom-repeat> Vorlage zu erhalten (Dart 1.17.1 + Polymer 1.0.0-rc.15). Mein Code ist wie folgt:

HTML, shop.html

<template is="dom-repeat" items="[[shop.itemList]]"> 
    <div class="md-row"> 
    <div class="md-cell">[[item.name]]</div> 
    <div class="md-cell"><input type="text" is="iron-input" name="quantity" bind-value="{{item.quantity}}" size="20" maxlength="20"></div> 
    <div class="md-cell"> 
    <select name="size" selectedIndex="{{item.selected}}" value="{{item.itemSize}}" on-tap="changeSize" > 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </select> 
</template> 

Dart, shop.dart

@PolymerRegister('shop') 
class Shop extends PolymerElement { 

    @Property(notify: true) 
    List<ShopItem> itemList = []; 

    @reflectable 
    changeSize(event, detail) { 
     var model = new DomRepeatModel.fromEvent(event); 

     print('Change Size'); 
     print(model.item.itemSize); 
    } 

    Shop.created() : super.created(); 

    ready() { 
     set("itemList", [new ShopItem(name: "Milk"), new ShopItem(name: "Butter")]); 
    } 
} 


class ShopItem extends JsProxy { 
    @reflectable String id; 
    @reflectable String name; 
    @reflectable num quantity; 

    String _itemSize = '2'; 

    @reflectable 
    String get itemSize => _itemSize; 

    void set itemSize(String s) { 
     _itemSize = s; 

     print("Changed Size " + _itemSize); 
    } 

    num _selected = 3; 

    @reflectable 
    num get selected => _selected; 

    void set selected(num s) { 
     _selected = s; 

     print("Changed selected" + _selected.toString()); 
    } 
} 

Wenn size aus dem Element <select> Auswahl der ausgewählte Wert tut Aktualisieren Sie das Modell nicht. So erhält der Aufruf an changeSize() immer den gleichen Wert. Hat jemand einen Rat, wie man das löst?

Answer 1

Es stellte sich heraus, dass das Problem durch Hinzufügen von ::change zu dem select Element wie folgt gelöst wird.

<select name="size" value="{{item.itemSize::change}}" on-tap="changeSize" > 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

Offenbar ::change benötigt, um das Ereignis auszulösen, die das Modell aktualisiert. Und Attribut wird nicht benötigt, um den Standardwert anzuzeigen.