Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Benachrichtigungsinteraktion im Polymer-Framework von JavaScript_Grundkenntnisse

WBOY
Freigeben: 2016-05-16 15:48:16
Original
1274 Leute haben es durchsucht

Polymer definiert Eigenschaften mit Überwachungsanforderungen in Form von Accessor-Eigenschaften (Eigenschaften ohne Überwachungsanforderungen werden weiterhin in Form von gewöhnlichen Eigenschaften definiert). Die „::“-Syntax kann in der Vorlage auch verwendet werden, um Attribute bidirektional mit einem Ereignis des Zielelements zu synchronisieren. Dies ist das Konzept der bidirektionalen Bindung in Angular, und es ist noch reiner und prinzipnäher als es.
Wenn das in den Eigenschaften definierte Attribut nicht mit notify hinzugefügt und nicht in der Vorlage verwendet wird, gelten für es keine Überwachungsanforderungen, sodass es als normales Attribut definiert wird. Andernfalls wird es als Accessor-Attribut definiert. Das folgende Beispiel erläutert dieses Problem
Führen Sie
aus

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <h1>[[z]]</h1>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    x: { value: 'x' },
    y: { value: 'y', notify: true }
   },
   ready: function() {
    console.log(Object.getOwnPropertyDescriptor(this, 'x'));
    console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'y'));
    console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'z'));
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Nach dem Login kopieren

Ein Attribut, bei dem notify auf „true“ gesetzt ist, generiert bei einer Änderung ein Ereignis „Name der Eigenschaft geändert“. Beachten Sie, dass der Attributname und geändert durch einen horizontalen Balken verbunden sind und geändert in der Vergangenheitsform steht und nicht der Prototyp von Änderung ist. Polymer kann Listener verwenden, um Ereignis-Listener hinzuzufügen, es kann jedoch nicht direkt an eine Funktion gebunden werden, sondern muss an einen bestimmten Eigenschaftsnamen gebunden werden (ich verstehe nicht, warum es so konzipiert ist).
Führen Sie
aus

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <h1>[[i]]</h1>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    i: { value: 0, notify: true }
   },
   ready: function() {
    setInterval(function(that) {
     that.i++; 
    }, 100, this);
   },
   listeners: {
    'i-changed': 'iChangeHandler'
   },
   iChangeHandler: function(event) {
    console.log(event.detail.value);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Nach dem Login kopieren

Ereignisse können mithilfe der „::“-Syntax in Vorlagen erfasst werden. Zu diesen Ereignissen gehören die oben generierten Benachrichtigungsereignisse und interaktive Ereignisse, die aktiv von Benutzern ausgelöst werden.
Führen Sie
aus

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" /

<dom-module id="demo-test">
 <template>
  <input value="{{text::input}}" /><hr/>
  <textarea value="{{css::input}}"></textarea><hr/>
  <h1 style$="[[css]]">[[text]]</h1>
 </template>
 <script>
  Polymer({ is: 'demo-test' });
 </script>
</dom-module>

<demo-test></demo-test>


Nach dem Login kopieren

2015729120757886.png (856×498)

Beachten Sie, dass oben style$="[css]" statt direkt style="css" lautet, da der Wert dem Attribut des Elements zugewiesen wird und keine reine Eigenschaftszuweisung ist. Fügen Sie also vor dem Gleichheitszeichen ein „$“ hinzu (eigentlich finde ich, dass diese Syntax sehr seltsam aussieht).
Das Obige ist alles, was ich über die Datenbindung in Polymer weiß. Es kann einige Auslassungen geben und diese können in anderen Artikeln hinzugefügt werden.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage