在聚合物飛鏢組件中使用選擇元素

嘗試按以下方式使用自定義元素中的選擇元件。按鈕點擊工作，但是當在列表中選擇一個項目時，'selected'和'value'屬性不會改變，列表總是顯示所選的第一個元素。綁定似乎工作從鏢到HTML，但不是從HTML到飛鏢。請幫助！在聚合物飛鏢組件中使用選擇元素

<html> 
    <head> 
    <title>index</title> 
     <script src="packages/polymer/boot.js"></script> 
    </head> 

    <body> 
    <polymer-element name="my-element" extends="div">  
     <template > 
      <button on-click='bclick'>Add new fruit</button>   
      <select selectedIndex="{{selected}}" value="{{value}}"> 
       <option template repeat="{{fruit in fruits}}">{{fruit}}</option> 
       </select> 

       <div> 
        You selected option {{selected}} with value-from-list 
        {{fruits[selected]}} and value-from-binding {{value}} 
       </div> 
     </template> 

      <script type="application/dart" src="polyselect.dart"></script> 
     </polymer-element>  
    <my-element></my-element> 
    <script type="application/dart">main() {}</script> 
</body> 
</html>

飛鏢文件如下：

import 'package:polymer/polymer.dart'; 
import 'dart:html'; 

@CustomTag('my-element') 
class MyElement extends PolymerElement { 

    @observable int selected = 1; // Make sure this is not null. 

    // Set it to the default selection index. 
    List fruits = toObservable(['apples', 'bananas', 'pears', 'cherry', 'grapes']); 

    @observable String value = ''; 

    void bclick(Event e) { 
    fruits.add("passion fruit"); 
    } 
}

來源

2013-08-30 user1848653

提示：你不需要在這種情況下擴展div。 –

我不得不混入的ObservableMixin類。

class MyElement extends PolymerElement with ObservableMixin

來源

2013-08-30 14:13:25 user1848653

在聚合物飛鏢組件中使用選擇元素

回答

相關問題