Polymer - Two Ways data binding

Polymer | Stefanescu Mihai | 2020-10-11

In acest articol din serie am sa folosesc codul initial.

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="salut-ip">
  <template>
    <style>
      .element-heading{
          font-family: monospace;
          text-shadow: 1px 1px 3px black;
      }
    </style>
    <h1 class="element-heading">Salut <span id="name"></span></h1>
  </template>
  <script>
      Polymer({
          is: "salut-ip",
          properties: {
            name: {
              type: Object,
              observer: 'getName'
            }
          },
          getName: function () {
              this.$.name.textContent = 'Mihai';
          },
          });
  </script>
</dom-module>

La ce ma refer cand spun “Two ways data binding”? Ma refer la un element ce isi schimba continutul o data ce utilizatorul modifica continutul intr-un anumit input.

Cum putem face asta?

Simplu, facem un input caruia ii dam acelasi value ca si al atributului.

Iata ce modificari am facut eu in codul meu js:

  <script>
      Polymer({
          is: "salut-ip",
          properties: {
            name: {
              type: Object,
              observer: 'getName'
            }
          },
          getName: function () {
              this.$.name.textContent = 'Mihai';
          },
          });
  </script>

Iata si input-ul meu:

    <h1 class="element-heading">Salut <span>{{name}}</span></h1>
    <input type="text" value="{{name::input}}">

Si din cate se observa in imagine, acesta este rezultatul:

Si acesta este codul meu final:

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="salut-ip">
  <template>
    <style>
      .element-heading{
          font-family: monospace;
          text-shadow: 1px 1px 3px black;
      }
    </style>
    <h1 class="element-heading">Salut <span>{{name}}</span></h1>
    <input type="text" value="{{name::input}}">
  </template>
  <script>
      Polymer({
          is: "salut-ip",
          properties: {
            name: {
              type: Object,
              observer: 'getName'
            }
          },
          getName: function () {
              this.$.name.textContent = 'Mihai';
          },
          });
  </script>
</dom-module>

 



Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.
       

Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

paul cozma
paul cozma | 2020-09-26 14:29
Am creat un gist cu o altฤƒ metodฤƒ de a face metoda de mai sus, ศ™i mie mi se pare mai simplฤƒ :) https://gist.github.com/anonymous/7fe1991fe79cf88dcf98df578ecf2d68

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.

๐Ÿ—๏ธ Login ๐ŸŒŸ Register

๐Ÿ”– Bookmarks โŠž
โœจ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

๐ŸŒช๏ธ Discord โŠž

Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.

โฌ†๏ธ