Comment puis-je enregistrer le clic sur un bouton d'icône en papier dans un moteur de rendu de cellule?

Question

Je travaille sur l'ajout d'un appel ajax à des boutons-icônes-papier qui sont rendus dans un rendu de cellule ag-grid. Voici le script dans mon composant polymère personnalisé. Les boutons d'icône en papier apparaissent et en cliquant dessus provoque l'ondulation, mais les fonctions sur le robinet ne sont pas appelées.

Y a-t-il une meilleure façon d'ajouter les entrées de bouton-icône-papier à la cellule? Comment puis-je ajouter correctement l'enregistrement du robinet?

Merci!

<script> 

    function sourceRenderer(params) { 
    if (params.value) 
     return '<span><a href="/harvest/' + params.data.asource + '/' + params.value + '">' + params.value + '</a>' 
    else 
     return null; 
    } 

    function innerCellRendererA(params) { 
    var imageFullUrl = '/images/' + params.data.type + '.png'; 
    if (params.data.type == 'entity') { 
     var entityUrl = '/analyze/' + params.data.asource + '/' + params.data.amodel + '/' + params.data.sourceName; 
     return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> <a href="'+entityUrl+'">' + params.data.name + ' (' + params.data.sourceName + ')</a>'; 
    } 
    else if (params.data.type == 'model') { 
     var entityUrl = '/harvest/' + params.data.asource + '/' + params.data.name; 
     return '<a href="javascript:void(0);" title="Harvest Relational Data"><img src="'+imageFullUrl+'" style="padding-left: 4px;" /></a> <a href="'+entityUrl+'">' + params.data.name + '</a>'; 
    } 
    else 
     return '<paper-icon-button src="'+imageFullUrl+'" on-tap="testjdbc" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + 
     '<paper-icon-button src="/images/database_export.svg" on-tap="harvestmodel" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + params.data.name; 
    }  

    Polymer({ 

    is: 'easymetahub-analyze', 

    properties: { 
     sourcelist: { 
     type: Array, 
     notify: true 
     } 
    }, 

    testjdbc: function(e){ 
     alert('Foo'); 
     var args = e.target.getAttribute('data-args').split('~~'); 
    }, 

    harvestmodel: function(e){ 
     alert('Bar'); 
     var args = e.target.getAttribute('data-args').split('~~'); 
    }, 

    handleData: function(e) { 
     var resp = e.detail.response; 
     this.sourcelist = resp; 
    }, 

    ready: function() { 
    }, 

    attached: function() { 
     agGrid.initialiseAgGridWithWebComponents(); 

     var columnDefs = [ 
     { 
      headerName: "Name", 
      'field': 'name', 
      width: 350, 
      cellRenderer: 'group', 
      sort: "asc", 
      cellRendererParams: { 
      innerRenderer: innerCellRendererA 
      } 
     }, 
     {headerName: "Database Type", field: "databasetype", width: 120 }, 
     {headerName: "URL", width: 250, field: "url" }, 
     {headerName: "User Name", field: "username", width: 120 } 
     ]; 

     var gridOptions = { 
     columnDefs: columnDefs, 
     enableColResize: true, 
     rowHeight: 36, 
     enableSorting: true, 
     getNodeChildDetails: function(file) { 
      if (file.children) { 
      return { 
       group: true, 
       children: file.children, 
       expanded: file.open, 
       field: 'name', 
       key: file.name 
      }; 
      } else { 
      return null; 
      } 
     }, 
     onGridReady: function(params) { 
      params.api.sizeColumnsToFit(); 
     } 
     }; 

     this.$.myGrid.setGridOptions(gridOptions); 
     var eInput = this.$.quickFilterInput; 
     eInput.addEventListener("input", function() { 
      var text = eInput.value; 
      gridOptions.api.setQuickFilter(text); 
     }); 

    }, 

    detached: function() { 
     this.$.myGrid.api.destroy(); 
    } 

    }); 

</script> 

Answer 1

options de la grille de » agGrid a une propriété pour un rappel - onModelUpdated - qui est appelée lorsque les nouvelles lignes sont ajoutées à la grille.

attached: function() { 
    var self = this; 
    var gridOptions = { 
     ... 
     onModelUpdated: function(e) { 
     self._bindGridIconTap(); 
     } 
    }; 
} 

Vous pouvez utiliser cet événement pour interroger la grille pour ses paper-icon-button s et ajouter leurs on-tap attributs en tant que gestionnaires d'événements.

_bindGridIconTap: function() { 
    this._bindActionsOnGrid('paper-icon-button', 'tap'); 
}, 

_bindActionsOnGrid: function(selector, eventName) { 
    var self = this; 
    var buttons = this.$.myGrid.querySelectorAll(selector); 
    buttons.forEach(function(b) { 
    self._bindEvent(b, eventName); 
    }); 
}, 

_bindEvent: function(el, eventName) { 
    var self = this; 
    var methodName = el.getAttribute('on-' + eventName); 
    var method = self[methodName]; 

    if (method) { 
    el.addEventListener(eventName, function(e) { 
     method(e); 
     e.stopPropagation(); 
     e.preventDefault(); 
     return false; 
    }); 
    } else { 
    console.warn(el.localName, 'listener method not found:', methodName); 
    } 
} 

plunker

Notez que vous avez un bogue dans:

var args = e.target.getAttribute('data-args').split('~~'); 

Dans un événement tap pour paper-icon-button, e.target est l'image de l'icône. Vous voulez réellement e.currentTarget, ce que j'ai fait pour vous dans le Plunker.