Question

尝试在自定义元素中使用Select组件，如下所示。按钮单击可以工作，但是当在列表中选择一个项目时，“选定”和“值”属性不会更改，列表始终显示所选的第一个元素。绑定似乎从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");
  }
}

Answer 1

我必须混合ObservableMixin类。

class MyElement extends PolymerElement with ObservableMixin

在聚合物飞镖组件中使用选择元素

1 个答案: