Code

Rozważmy następujący Polymer niestandardowy element:Polymer 1.0: Dwukierunkowe powiązania z elementami wejściowymi

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

Używam tego niestandardowego elementu w moim index.html następująco:

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

Pytanie

Wierzę, że zadeklarowałem właściwość value jako wiązanie dwukierunkowe (notify: true); ale gdy klikam wejście i wpisuję tekst (powiedzmy: "foo"), nie jest on odzwierciedlany w modelu (tzn. wywołanie document.querySelector('test-element').value zwraca wartość ustawioną w index.html, "test"). Interesujące jest, że atrybut wejścia zmienia się prawidłowo, ale właściwość value mojego elementu testowego nie zmienia się. czego mi brakuje?

Należy również zauważyć, że połączenie z document.querySelector('test-element').setAttribute('value', 'bar') działa poprawnie.

Źródło

2015-06-14 Andre Gregori

Pierwsza uwaga, że notify i reflectToAttribute pola na posesji value powiedzieć to, jak reagują na niego rodzic nie o tym, jak wiążą się z dzieckiem.

IOW, notify: true znaczy uczynić value dwukierunkową Bindable z poza, a nie od środka. reflectToAttribute: true mówi Polymerowi, aby zapisał value do atrybutu za każdym razem, gdy się zmieni (nie jest to dobre dla wydajności).

kiedy wykonujesz wiązania jak <x-element foo="{{value}}">, to x-elementowa który decyduje, czy foo jest dwukierunkowa Bindable.

Elementy rodzime, takie jak input, nie mają zintegrowanego wsparcia dwukierunkowego, zamiast tego użyj składni zdarzeń Obserwator zdarzeń do dwukierunkowego powiązania z danymi wejściowymi. Podobnie jak w przypadku <input value="{{value::change}}">.

Mówi Polymer zaktualizować this.value od input.value ilekroć input pożary zdarzenie change.

Źródło

2015-06-14 23:09:46

Dzięki. Rozróżnienie wewnętrzne/zewnętrzne ma teraz dla mnie sens. Poprosiłem o edytowanie, dodając link do dokumentacji. –

Chciałbym tylko wskazać niuanse [Scott Miles] (http://stackoverflow.com/users/2192324/scott-miles), ponieważ pole 'readOnly' w deklaracji własności nie reguluje wyłącznie właściwości obiektu zachowanie w odniesieniu do elementów spoza lokalnego DOM, ale także elementy wewnątrz lokalnego DOM. IOW, jeśli ustawię właściwość jako tylko do odczytu, jest ona przeznaczona tylko do odczytu dla dzieci i przodków. –

Dla jasności, nie oznacza to, że właściwości tylko do odczytu nigdy nie są modyfikowalne; właściwość tylko do odczytu _jest modyfikowalna za pomocą specjalnej metody ustawiającej, ale z tego, co widzę, nie wynika to z użycia API wiążącego dane. –

Trzeba to zmienić:

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

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

spróbować here. To oznacza, że polimer może słuchać zdarzeń wejściowych. Objaśnienie here (niezbyt wyraźnie IMO).

Źródło

2015-06-14 23:13:30 Andrey

Masz rację, jest pochowany gdzieś w dokumentach; Edytowałem powyższą odpowiedź z linkiem do dokumentów (czekając na sprawdzenie), ale również wkleję go tutaj, aby każdy mógł go łatwo znaleźć: https://www.polymer-project.org/ 1.0/docs/devguide/data-binding.html # two-way-native –

Jak wspomnieli Andrey i Scott Miles, oba te rozwiązania będą działać, aby uzyskać dwukierunkowe wiązanie z natywnym polem wprowadzania HTML.

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

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

z ważną różnicą:

:: zmiana będzie tylko ognia, gdy pole tekstowe traci fokus lub wprowadź przycisku.

:: wejście będzie uruchamiane przy każdym naciśnięciu klawisza.

Źródło

2017-12-16 23:10:00

Polymer 1.0: Dwukierunkowe powiązania z elementami wejściowymi

Code

Pytanie

Odpowiedz

Powiązane problemy