13

コード

次の 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').valueindex.html で設定した値を への呼び出しが返します"test")。興味深いことにvalue、入力の属性は正しく変更されますが、テスト要素の値プロパティは変更されません。私は何が欠けていますか？

document.querySelector('test-element').setAttribute('value', 'bar')への呼び出しが適切に機能することにも注意してください。

4

3 に答える 3

29

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

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

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

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

これにより、イベントが発生するたびに更新this.valueするよう Polymer に指示します。input.valueinputchange

于 2015-06-14T23:09:46.150 に答える
16

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

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

の中へ

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

ここで試してみてください。これは、ポリマーが入力のイベントをリッスンすることを示しています。ここで説明されています（IMOはあまり明確ではありません）。

于 2015-06-14T23:13:30.210 に答える
0

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

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

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

重要な違いがあります:

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

::input はキーを押すたびに発火します。

于 2017-12-16T23:10:00.987 に答える