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

Question

嘗試在自定義元素中使用“選擇”組件，如下所示。 單擊按鈕有效，但是當在列表中選擇一個項目時，“ 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");
  }
}

Answer 1

我不得不混入ObservableMixin類。

class MyElement extends PolymerElement with ObservableMixin

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

問題描述

1 個解決方案

解決方案1
0 已采納 2013-08-30 14:13:25

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

問題描述

1 個解決方案

解決方案1 0 已采納 2013-08-30 14:13:25

解決方案1
0 已采納 2013-08-30 14:13:25