Polymer - Two Ways data binding

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>