0

尝试在自定义元素中使用 Select 组件，如下所示。按钮单击有效，但是当在列表中选择一个项目时，'selected' 和 'value' 属性不会改变，并且列表总是显示第一个被选中的元素。绑定似乎可以从 dart 到 html，但不能从 html 到 dart。请帮忙！

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

Dart文件如下：

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");
  }
}
4

1 回答 1

0

我不得不混ObservableMixin课。

class MyElement extends PolymerElement with ObservableMixin
于 2013-08-30T14:13:25.410 回答