LoginSignup
1

More than 5 years have passed since last update.

Angular2のevent bindngとproperty bindingの記法がdash-case(kebab-case)からcamelCaseに変更されていた。

Last updated at Posted at 2015-12-27

1ヶ月前のBreaking changeなので周回遅れ感はあるが、Angular.ioのDart版docにはまだ反映されていないのでメモしておく。
TypeScript版に合わせてDart版が改訂される時にはこれも反映されているだろう。
https://angular.io/docs/ts/latest/guide/displaying-data.html
https://angular.io/docs/dart/latest/guide/displaying-data.html

この変更により、例えばAngularのcore directiveであるngIf, ngForなどのselectorがng-ifからngIfng-forからngForといったように変更されている。

詳細は以下。
https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md

この変更の理由としてdesign docが公開されており、ざっくり言うと、

Event bindingをdash-caseで書き((my-event)="exp()")camelCaseのevent名に変換するルールでは、dash-caseのevent名が定義された際にbindingできない。そのためdash-case to camelCase変換は止めたとのこと。

Property bindingもまたCSS selectorがcase insensitiveであることに起因するbindingの問題を解決するために、Angularでbindingするattribute nameはcase sensitiveとして扱い、dash-case to camelCase変換は止めたとのこと。

詳細は以下。
https://docs.google.com/document/d/1UMxTIUBTIUZNfOqwMhkLg0ANFSBtLIK9JsIu77EZaBA/edit?ts=564f7dd4

Polymerでcomponentを書いているとAttributeのdash-caseとPropertyのcamelCaseの書き分けをつい忘れてしまい、AttributeをcamelCaseで書いてデバッグで無駄な時間を使ってしまう経験が何度かあるので、その点でもこの変更は歓迎。ちなみにcamelCaseで定義されたものをうっかりdash-caseで書くとTemplateCompilerがちゃんとエラーを吐いてくれるのが嬉しい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1