web-dev-qa-db-fra.com

Polymer 1.0: Liaisons à double sens avec éléments d'entrée

Code

Considérez l'élément personnalisé Polymer suivant:

<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>

J'utilise cet élément personnalisé dans mon index.html comme suit:

<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>

Question

Je pense avoir déclaré la propriété value comme une liaison bidirectionnelle (notify: true); Pourtant, lorsque je clique sur l'entrée et que je tape du texte (par exemple, "foo"), il n'est pas reflété dans le modèle (c'est-à-dire qu'un appel à document.querySelector('test-element').value renvoie la valeur que j'ai définie dans index.html, "test"). Il est intéressant de noter que l'attribut value de l'entrée change correctement, mais pas la propriété value de mon élément de test. Qu'est-ce que je rate?

Je devrais également noter qu'un appel à document.querySelector('test-element').setAttribute('value', 'bar') fonctionne correctement.

javascriptpolymercustom-element
13
Andre Gregori

Notez tout d'abord que les champs notify et reflectToAttribute de la propriété value lui indiquent comment réagir vis-à-vis de son parent et non comment lier à un enfant.

IOW, notify: true signifie que value peut être lié dans les deux sens à partir de outside , et non de l'intérieur. reflectToAttribute: true indique à Polymer d'écrire value dans un attribut chaque fois qu'il change (ce qui n'est pas bon pour les performances).

Lorsque vous faites une liaison telle que <x-element foo="{{value}}">, c'est x-element qui décide si foo peut être lié dans les deux sens. 

Les éléments natifs tels que input n'ont pas de prise en charge de liaison bidirectionnelle intégrée, mais utilisent plutôt la syntaxe d'observateur d'événements de Polymer pour une liaison bidirectionnelle à une entrée. Comme si <input value="{{value::change}}">.

Cela indique à Polymer de mettre à jour this.value à partir de input.value chaque fois que la input déclenche un événement change.

29
Scott Miles

Vous devez changer ceci:

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

dans

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

essayez ici . Cela signifie que le polymère doit écouter les événements d'entrée. Expliqué ici (pas très clairement IMO).

14
Andrey

Comme mentionné par Andrey et Scott Miles, ces deux solutions permettent d'obtenir une liaison bidirectionnelle avec une zone de saisie HTML native.

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

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

Avec une différence importante:

:: change ne sera déclenché que lorsque la zone de texte perd le focus ou que vous appuyez sur Entrée. 

:: l'entrée sera déclenchée à chaque pression de touche.

0
Steven Spungin