Question

所以我有以下Dart / Polymer类：

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

  @observable int currentIndex = 1;

  MySelectElement.created() : super.created() {}

  void changed() {
    print(currentIndex);
  }
}

和匹配的html模板：

<template name="my-select-element">
  <select on-change="{{changed}}" selectedIndex="{{currentIndex}}">
    <option>Index 0</option>
    <option>Index 1</option>
    <option>Index 2</option>
  </select>
</template>

当我点击select元素的一个选项时，我得到了正确的索引 - 来自之前的。正如w3schools event attributes告诉我的那样，这是正确的行为，我应该使用onselect而不是onchange来在更改后获取值。

但是，我找不到onselect或on-select或类似的东西，当我单独通过dart构建select元素时，onChange.listen会提供所需的，如果不正确的结果。

我知道在按下按钮后我总是可以检索结果，但在这种情况下，我想在不等待的情况下做事。

我错过了正确的关键字吗？

Answer 1

这样我就可以在选择后获得selectedIndex 当我尝试绑定到value时default value停止工作（所以我评论了它）。

此示例显示了有关更改的通知方式：

事件处理程序
更改可观察财产的通知

<polymer-element name="my-select" >
  <template>
    <select selectedIndex="{{currentIndex}}" on-change="{{changedHandler}}">
      <option>Index 0</option>
      <option>Index 1</option>
      <option>Index 2</option>
    </select>

    <!-- <div>value: {{value}}</div> -->
    <div>currentIndex: {{currentIndex}}</div>
  </template>
  <script type='application/dart' src='my_select.dart'></script>
</polymer-element>

library x;

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

@CustomTag('my-select')
class MySelect extends PolymerElement {
  @observable int currentIndex = 1;
  @observable int value = 1;

  MySelect.created() : super.created() {
    print('MySelect');
  }

  void changedHandler(event, details, Element target) {
    print('changed: ${currentIndex}');
  }

  void currentIndexChanged(old) {
    print('currentIndexChange: ${currentIndex}');
  }
}

Answer 2

我必须调整changeEventHandler方法以使JS版本正常工作：

void changeEventHandler(Event e, var details, var target) {
    /* Fix JS bug - ${currentIndex} still refers to the old value whereas in Chrome it already has the new value */
    currentIndex = target.selectedIndex;
}

使用Dart / Polymer选择元素：如何获取索引on-select

2 个答案: