Polymer - Zwei-Wege-Bindung in Dom-Repeat

Question

Ist es möglich, etwas von dieser Art zu erreichen. Sagen, ich habe ein Element my-element.html

Here I Vorlage repeate versuchen zu verwenden Papier-Tasten zu erzeugen, die von einem Objekt controlButtons Fütterung, die bei der Erzeugung der Tasten mit dem Namen gut funktioniert und ID. Aber die deaktivierte Bindung funktioniert nicht und auch die On-Click-Listener werden von diesem Ansatz nicht registriert.

Meine Frage ist, ist das der richtige Weg, es zu tun? Oder es ist nicht möglich, eine solche Art von Bindungen in Polymer hinzuzufügen.

P.S.- Dies ist ein Beispiel Beispiel, aber in meiner App gibt es viele Tasten und Elemente und daher versuche ich eine Vorlage Repeater für den Zweck zu verwenden.

<dom-module id="my-element"> 
<template> 
    <div id="top_container" class="layout vertical center-justified">   
     <div id="controls" class="horizontal layout"> 
      <template is="dom-repeat" items="{{controlButtons}}" as="button"> 
       <paper-button id="{{button.id}}" class="button" on-click={{button.onClickBinding}} disabled$="{{button.disableBinding}}" raised>{{button.name}}</paper-button> 
      </template> 

      <!-- Commented temporarily for template test --> 
      <!--<paper-button id="start_button" class="button" on-click="buttonAClick" disabled$="{{__computeDisabling(1, controlFlag2, controlFlag1)}}" raised>A</paper-button> 
      <paper-button id="stop_button" class="button" on-click="buttonBClick" disabled$="{{__computeDisabling(2, controlFlag2, controlFlag1)}}" raised>B</paper-button>     
      <paper-button id="clear_button" class="button" on-click="buttonCClick" disabled$="{{__computeDisabling(4, controlFlag4, controlFlag1)}}" raised>C</paper-button> 
      <paper-button disabled$="{{__computeDisabling(6, controlFlag4, controlFlag1, disableSave)}}" class="button" on-click="buttonDClick" raised>D</paper-button> 
      <paper-button id="import_button" class="button" on-click="buttonEClick" disabled$="{{__computeDisabling(5, '', controlFlag2)}}" raised>E</paper-button>--> 

     </div> 

    </div> 
</template> 
<script> 
    Polymer({ 
     is: "my-element", 
     properties: { 
      controlFlag1: { 
       type: Boolean, 
       value: false, 
       notify: true 
      }, 
      controlFlag2: { 
       type: Boolean, 
       notify: true, 
       value: false 
      }, 
      controlFlag3: { 
       type: Boolean, 
       value: false 
      }, 
      controlFlag4: { 
       type: Boolean, 
       value: true, 
       notify: true 
      }, 
      controlButtons: { 
       type: Object, 
       value: [{name: "A", id: "buttonA", onClickBinding: "buttonAClick", disableBinding: "{{__computeDisabling(1, controlFlag2, controlFlag1)}}"}, 
         {name: "B", id: "buttonB", onClickBinding: "buttonBClick", disableBinding: "{{__computeDisabling(2, controlFlag2, controlFlag1)}}"}, 
         {name: "C", id: "buttonC", onClickBinding: "buttonCClick", disableBinding: "{{__computeDisabling(4, controlFlag4, controlFlag1)}}"}, 
         {name: "D", id: "buttonD", onClickBinding: "buttonDClick", disableBinding: "{{__computeDisabling(6, controlFlag4, controlFlag1, controlFlag3)}}"}, 
         {name: "E", id: "buttonE", onClickBinding: "buttonEClick", disableBinding: "{{__computeDisabling(5, '', controlFlag2)}}"}] 
      } 
     }, 
     created: function() {}, 
     ready : function() {}, 
     buttonAClick: function() { 
      console.log("A button clicked!"); 
     }, 
     buttonBClick: function() { 
      console.log("B button clicked!"); 
     }, 
     buttonCClick: function() { 
      console.log("C button clicked!"); 
     }, 
     buttonDClick: function() { 
      console.log("D button clicked!"); 
     }, 
     buttonEClick: function() { 
      console.log("E button clicked!"); 
     }, 
     __computeDisabling: function(call, flag1, flag2, flag3) { 
      switch (call) { 
      case 1: 
       return !flag1 || flag2; 
      case 2: 
       return !flag1 || !flag2; 
      case 3: 
       return !flag1 || !flag2; 
      case 4: 
       return flag1 || flag2; 
      case 5: 
       return flag2; 
      case 6: 
       return flag1 || flag2 || flag3; 
      case 7: 
       return !flag2; 
      } 
     }, 
    }); 
</script> 

Answer 1

Als Goce Ribeski said, ist es nicht ohne weiteres möglich, aber es ist möglich, Polymer des Datenmodells zu verwenden.

bearbeiten

Die Sperrtaste anders gemacht werden sollte. Ich würde die Flags als Objekteigenschaften hinzufügen und dann in der _computeDisabled Methode entscheiden, ob die Schaltfläche deaktiviert werden soll oder nicht. Sidenote: Sie benötigen das $ für das deaktivierte Attribut nicht, da <paper-button> ein benutzerdefiniertes Element ist.

Hier ist ein vollständiges Beispiel auf dem Code basiert:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Event Handling</title> 
 
    <base href="https://polygit.org/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
    <link href="paper-button/paper-button.html" rel="import"> 
 
</head> 
 
<body> 
 
<dom-module id="my-element"> 
 
    <template> 
 
    <div id="top_container" class="layout vertical center-justified"> 
 
     <div id="controls" class="horizontal layout"> 
 
     <template is="dom-repeat" items="{{controlButtons}}" as="button"> 
 
      <paper-button id="{{button.id}}" on-click="_handleButtonClick" 
 
         disabled="{{_computeDisabling(button)}}" 
 
         raised>{{button.name}} 
 
      </paper-button> 
 
     </template> 
 
     </div> 
 
    </div> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: "my-element", 
 
     properties: { 
 
     controlButtons: { 
 
      type: Object, 
 
      value: [{name: "A", id: "buttonA", onClickBinding: "buttonAClick", call: 1, flags: ['controlFlag2','controlFlag1']}, 
 
      {name: "B", id: "buttonB", onClickBinding: "buttonBClick", call: 2, flags: ['controlFlag2','controlFlag1']}, 
 
      {name: "C", id: "buttonC", onClickBinding: "buttonCClick", call: 4, flags: ['controlFlag4','controlFlag1']}, 
 
      {name: "D", id: "buttonD", onClickBinding: "buttonDClick", call: 6, flags: ['controlFlag4','controlFlag1','controlFlag2']}, 
 
      {name: "E", id: "buttonE", onClickBinding: "buttonEClick", call: 8, flags: ['','controlFlag2']}] 
 
     } 
 
     }, 
 
     // some magic: use the function name in the module's namespace. 
 
     _handleButtonClick: function(e) { 
 
     this[e.model.button.onClickBinding](); 
 
     }, 
 
     // disable the button, depending on it's flag properties. 
 
     _computeDisabling: function(button) { 
 
     var call, flag1, flag2, flag3; 
 
     call = button.call; 
 
     flag1 = button.flags[0]; 
 
     flag2 = button.flags[1]; 
 
     flag3 = button.flags[2]; 
 

 
     // your business logic goes here. 
 
     switch (call) { 
 
      case 1: 
 
      return !flag1 || flag2; 
 
      case 2: 
 
      return !flag1 || !flag2; 
 
      case 3: 
 
      return !flag1 || !flag2; 
 
      case 4: 
 
      return flag1 || flag2; 
 
      case 5: 
 
      return flag2; 
 
      case 6: 
 
      return flag1 || flag2 || flag3; 
 
      case 7: 
 
      return !flag2; 
 
     } 
 
     }, 
 

 
     buttonAClick: function() { 
 
     console.log("A button clicked!"); 
 
     }, 
 
     buttonBClick: function() { 
 
     console.log("B button clicked!"); 
 
     }, 
 
     buttonCClick: function() { 
 
     console.log("C button clicked!"); 
 
     }, 
 
     buttonDClick: function() { 
 
     console.log("D button clicked!"); 
 
     }, 
 
     buttonEClick: function() { 
 
     console.log("E button clicked!"); 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module> 
 
<my-element></my-element> 
 
</body> 
 
</html>

Answer 2

Auf der Grundlage dieser Antwort es nicht möglich ist: How can i bind a dynamic function within a polymer component?

Alle Tasten die gleiche "main" Methode aufrufen müssen.

Sie können die Schaltfläche speichern bezogene Funktion in einer separaten Eigenschaft „calls_method“, wie:

name: "A", id: "buttonA", calls_method: "buttonAClick",... 

Dann in der „main“ on-Klick-Methode, dass „calls_method“ Wert erhalten, und auf dieser Marke basieren Anruf. JS-Funktionsaufruf von Variablennamen kann es verwendet werden, wie:

var method = e.target.attributes.calls_method.value; 
method();