2013-08-30 66 views
0

尝试按以下方式使用自定义元素中的选择元件。按钮点击工作,但是当在列表中选择一个项目时,'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"); 
    } 
} 
+0

提示:你不需要在这种情况下扩展div。 –

回答

0

我不得不混入的ObservableMixin类。

class MyElement extends PolymerElement with ObservableMixin 
相关问题