Polymer.dart のデータバインディングでの型が変わった

  • 4
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

1年前に作った Polymer.dart アプリケーション が、最新の Google Chrome で動かなくなっていたので、動くように修正した。ついでに Polymer.dart などの依存パッケージのアップデートをしていたらハマッたのでメモ。

端的に描いてしまうと Polymer.dart の <input type="number"> でバインディングされる型が変わった。

具体的には:

  • Polymer.dart 1.5.x では <input type="number"> でバインディングされる型が他の type 属性値と同様 String だった。
  • Polymer.dart 1.6.x では <input type="number"> でバインディングされる型が int になっている。

実行例(エントリポイントは省略):

my_app.html
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="my-app">
  <template>
    <table>
      <tr>
        <th><label for="number-input">input type="number"</label></th>
        <td><input id="number-input" type="number" value="{{foo}}"></td>
      </tr>
      <tr>
        <th><label for="text-input">input type="text"</label></th>
        <td><input id="text-input" type="text" value="{{foo}}"></td>
      </tr>
      <tr>
        <th>型情報:</th>
        <td>{{foo.runtimeType.toString()}}</td>
      </tr>
    </table>
    <script type="application/dart" src="my_app.dart"></script>
  </template>
</polymer-element>
my_app.dart
library my_app;

import 'package:polymer/polymer.dart';

@CustomTag("my-app")
class MyAppElement extends PolymerElement {
  MyAppElement.created(): super.created();
  @observable String foo;
}

これを Google Chrome で動かしてみる。

Polymer.dart 1.5.5+4

Screenshot from 2015-08-17 22:47:56.png

Screenshot from 2015-08-17 22:48:47.png

Polymer.dart 1.6.0

Screenshot from 2015-08-17 22:51:57.png

Screenshot from 2015-08-17 22:52:13.png

Screenshot from 2015-08-17 22:52:30.png

Screenshot from 2015-08-17 23:11:37.png

String foo なのに、foo.runtimeType.toString()int になったり、double になったりしている。

Changelog で言及されてる?

これかな:

The transformer has been heavily refactored and may behave slightly differently.
polymer 0.16.3+3 | Pub Package Manager から引用

つらい

つらい。

加えて、以前からそうだったけど、Polymer.dart は今回の String foo で定義してるのに int がバインディングされるように、警告もなく型を破ってくるのでつらい。