Dart의 dom-repeat 템플릿에서 선택한 옵션을 얻는 방법은 무엇입니까?

Question

<select> 요소가 <dom-repeat> 템플릿 (Dart 1.17.1 + Polymer 1.0.0-rc.15) 내에있는 변경된 값을 가져 오려고 할 때 문제가 발생합니다.

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> 

다트,

@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()); 
    } 
} 

<select> 요소에서 size을 선택, 선택한 값이하는 shop.dart를 다음과 같이 내 코드는 모델을 업데이트하지 마십시오. 따라서 changeSize()에 대한 호출은 항상 동일한 값을 얻습니다. 누구든지이 문제를 해결하는 방법에 대한 조언이 있습니까?

Answer 1

밝혀진 문제는 다음과 같이 select 요소에 ::change을 추가하여 해결되었습니다.

<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> 

분명히 ::change은 모델을 업데이트하는 이벤트를 트리거하는 데 필요합니다. 그리고 selectedIndex 속성은 기본값을 표시하는 데 필요하지 않습니다.