Angular2 for Dartで気づいたことですがおそらくJSでも変わらないはず。
スクリプト側はこんなComponent
@Component(selector: 'my-app')
@View(templateUrl: 'app_component.html')
class AppComponent {
}
Case.1 (works well)
app_component.html
<input #myname (keyup)>
<p>{{ myname.value }}</p>
Case.2 (error!)
app_component.html
<input #myName (keyup)>
<p>{{ myName.value }}</p>
Exception: Uncaught Error: Class 'AppComponent' has no instance getter 'myName'.
What's happened?
違いはmyname
とmyName
である。
1行目のHTMLタグ中に書かれた#myname
はDirectiveである。よって命名規則は
Must not contain any uppercase ASCII letters.
である。ただし即エラーになるわけではなく、大文字英数字が含まれている場合はDart(or JS)側のオブジェクトであるとしてスコープ内の検索を行う。今回はAppComponentに同名のgetterやmethod、propertyが存在しないのでエラーとなる。しかしたとえComponent側にmyName
プロパティを持っていたとしてもそれは本来の#myName
としてのバインドは行われず、うまく動かない。
2行目の{{ myname.value }}
中のmyname
はAngular2側で解釈される部分であるため、命名規則はなく単純に文字列DIでバインドされるだけである。
ちなみにPolymerやCustomElementを触ったことがある人ならすぐにわかると思うが、次のパターンは正常に動作する
<input #my-name (keyup)>
<p>{{ myName.value }}</p>