ドキュメントのstartを読み終えて、さあなにか作ってみるか、そうだよく 2-way binding の例で出てくるinputタグ入力値を画面に反映させるのをやってみよう、と思って
1
2
3
4
|
<template>
<div><input type="text" value="{{text}}" /></div>
<div>[[text]]</div>
</template>
|
とかやってみたものの上手く行かなかった。
答えはここにありました。
inputイベントを拾うために次のように ::input を後ろにくっつける必要がある。
1
2
3
4
|
<template>
<div><input type="text" value="{{text::input}}" /></div>
<div>[[text]]</div>
</template>
|
参考: Cannot data bind to <input> in Polymer 2.0 - Stack Overflow
全文はこちら:
https://jsfiddle.net/2eqkymLf/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<base href="https://polygit.org/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="polymer/polymer-element.html" />
</head>
<body>
<my-input></my-input>
<dom-module id="my-input">
<template>
<div><input type="text" value="{{text::input}}" /></div>
<div>[[text]]</div>
</template>
<script>
// For Firefox
// https://github.com/Polymer/polymer-bundler/issues/234#issuecomment-133379949
window.addEventListener("WebComponentsReady", function () {
class MyInput extends Polymer.Element {
static get is() {
return "my-input";
}
static get properties() {
return {
text: String,
};
}
constructor() {
super();
}
}
customElements.define(MyInput.is, MyInput);
});
</script>
</dom-module>
</body>
</html>
|