web-dev-qa-db-ja.com

Polymer 1.0：入力要素を使用した双方向バインディング

コード

次のPolymerカスタム要素：

_<dom-module id="test-element">

<template>
    <input type="text" value="{{value}}">
    <button>Reset</button>
</template>

<script>
Polymer({
    is: 'test-element',
    properties: {
        'value': {
            type: String,
            reflectToAttribute: true,
            notify: true,
            value: null
        }
    }
});
</script>

</dom-module>
_

Index.htmlでこのカスタム要素を次のように使用します。

_<html>
<head>
    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="test-element.html">
    <title>Test App</title>
</head>
<body>
    <test-element value="test"></test-element>
</body>
</html>
_

質問

valueプロパティを双方向バインディング（_notify: true_）として宣言したと思います。それでも、入力をクリックしてテキスト（たとえば、_"foo"_）を入力すると、モデルに反映されません（つまり、document.querySelector('test-element').valueを呼び出すと、index.htmlで設定した値が返されます。 、_"test"_）。興味深いことに、入力のvalue属性は正しく変更されますが、テスト要素のvalueプロパティは変更されません。何が足りないのですか？

また、document.querySelector('test-element').setAttribute('value', 'bar')の呼び出しは正しく機能することにも注意してください。

javascriptpolymercustom-element
13
Andre Gregori

最初に、notifyプロパティのreflectToAttributeフィールドとvalueフィールドは、子にバインドする方法ではなく、親に反応する方法を示していることに注意してください。

IOW、notify: trueは、valueを内部からではなく外部から双方向でバインド可能にすることを意味します。 reflectToAttribute: trueは、属性が変更されるたびにvalueを属性に書き込むようにPolymerに指示します（パフォーマンスには良くありません）。

<x-element foo="{{value}}">のようなバインディングを行う場合、fooが双方向バインディング可能かどうかを決定するのはx-elementです。

inputのようなネイティブ要素には、双方向バインディングのサポートが組み込まれていません。代わりに、Polymerのイベントオブザーバー構文を使用して、入力に双方向バインドします。そのように<input value="{{value::change}}">。

これは、inputがchangeイベントを発生させるたびに、this.valueをinput.valueから更新するようにPolymerに指示します。

29
Scott Miles

これを変更する必要があります：

<input type="text" value="{{value}}">

に

<input type="text" value="{{value::input}}">

ここ を試してください。これは、polymerが入力のイベントをリッスンすることを意味します。説明 ここ （あまり明確ではないIMO）。

16
Andrey

AndreyとScottMilesが述べたように、これらのソリューションは両方とも、ネイティブHTML入力ボックスとの双方向バインドを取得するために機能します。

<input type="text" value="{{value::input}}">

<input type="text" value="{{value::change}}">

重要な違いがあります：

:: changeは、テキストボックスがフォーカスを失うか、Enterキーが押された場合にのみ発生します。

:: inputはキーを押すたびに起動します。

0
Steven Spungin