Codice

Si consideri il seguente elemento personalizzato Polimero:Polymer 1.0: collegamenti a due vie con gli elementi di input

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

Io uso questo elemento personalizzato nel mio index.html come segue:

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

domanda

Credo di aver dichiarato la proprietà value come associazione a due vie (notify: true); tuttavia, quando faccio clic sull'input e digito del testo (ad esempio, "foo"), non si riflette nel modello (ad esempio, una chiamata a document.querySelector('test-element').value restituisce il valore impostato in index.html, "test"). È interessante notare che l'attributo value dell'input cambia correttamente, ma la proprietà value del mio test-elemento no. Cosa mi manca?

Devo anche notare che una chiamata a document.querySelector('test-element').setAttribute('value', 'bar') funziona correttamente.

fonte

2015-06-14 Andre Gregori

Innanzitutto, i campi notify e reflectToAttribute sulla proprietà value indicano come reagire al suo genitore non su come eseguire il binding a un figlio.

IOW, notify: true significa rendere value bidirezionale associabile dalla dall'esterno, non dall'interno. reflectToAttribute: true indica a Polymer di scrivere value in un attributo ogni volta che cambia (non buono per le prestazioni).

Quando non un'associazione come <x-element foo="{{value}}">, è x-elemento che decide se foo è bidirezionale associabile.

Gli elementi nativi come input non hanno il supporto di binding a due vie incorporato, ma usano la sintassi di event-observer di Polymer per il collegamento bidirezionale a un input. Mi piace così <input value="{{value::change}}">.

Questo indica a Polymer di aggiornare this.value da input.value ogni volta che lo input genera un evento change.

fonte

2015-06-14 23:09:46

Grazie. La distinzione interno/esterno ora ha senso per me. Ho richiesto una modifica aggiungendo un collegamento alla documentazione. –

Vorrei solo sottolineare una sfumatura [Scott Miles] (http://stackoverflow.com/users/2192324/scott-miles) in quanto il campo 'readOnly' nella dichiarazione di proprietà non governa solo la proprietà comportamento rispetto agli elementi esterni al DOM locale, ma anche elementi all'interno del DOM locale. IOW, se imposto una proprietà come sola lettura è di sola lettura per i bambini e gli antenati. –

Giusto per essere chiari, questo non vuol dire che le proprietà di sola lettura non siano mai modificabili; una proprietà di sola lettura _è modificabile_ tramite un metodo setter speciale, ma per quanto posso vedere non è attraverso l'uso dell'API di associazione dati. –

è necessario modificare questo:

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

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

provare here. Questo dice che il polimero ascolta gli eventi di input. Spiegato here (non molto chiaramente IMO).

fonte

2015-06-14 23:13:30 Andrey

Hai ragione, è un po 'sepolto nei documenti da qualche parte; Ho modificato la risposta di cui sopra con un link ai documenti (in attesa di essere sottoposti a peer review), ma lo incollo anche qui per chiunque lo trovi facilmente: https://www.polymer-project.org/ 1.0/docs/DevGuide/dati-binding.html # bidirezionale-native –

Come menzionato da Andrey e Scott Miles, entrambe queste soluzioni funzioneranno per ottenere il binding a 2 vie con una casella di input HTML nativo.

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

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

Con una differenza importante:

:: si è premuto il cambiamento solo il fuoco quando la casella di testo perde lo stato attivo o immettere.

:: l'input verrà attivato su ogni pressione di un tasto.

fonte

2017-12-16 23:10:00

Polymer 1.0: collegamenti a due vie con gli elementi di input

Codice

domanda

risposta

Problemi correlati