Как зарегистрировать привязку в кнопке-значке бумаги в средстве рендеринга ячейки ag-сетки?

Question

Я работаю над добавлением вызова ajax к кнопкам-значкам, которые отображаются в средстве рендеринга ячейки ag-grid. Вот сценарий в моем пользовательском компоненте полимера. Бумажные кнопки-значки появляются, и нажатие на них вызывает пульсацию, но функции в касании не вызываются.

Есть ли лучший способ добавить в ячейку записи кнопки-кнопки? Как я могу правильно добавить регистрацию?

Спасибо!

<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

agGrid «s Параметры сетки имеет свойство для обратного вызова - onModelUpdated - что называется, когда новые строки добавляются к сетке.

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

Вы можете использовать это событие для запроса сетки для ее paper-icon-button с и добавить их on-tap атрибуты обработчиков событий.

_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

Примечание Вас есть ошибка в:

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

В случае с tap для paper-icon-button, e.target это изображение значка. Вы действительно хотите e.currentTarget, что я сделал для вас в Plunker.