Ember deprecation jQuery Datentabellen wurde im didInsertElement modifizierten

Question

Haken

ich eine App in ember ich schreibe jQuery Datentabellen mit und ich habe eine deprecation bekam, hier ist mein Code:

import Ember from 'ember'; 
    export default Ember.Component.extend({ 
    didInsertElement() 
    { 
     var selected1 =new Array(); 
     var table = this.$('#example').DataTable 
     ({ 
     "bAutoWidth": false, 
     "responsive":true, 
     "ajax": '/lens', 
     "columns": 
     [ 
      { "data": "id" }, 
      { "data": "type" }, 
      { "data": "sizeA" }, 
      { "data": "sizeB" }, 
      { "data": "sizeC" }, 
      { "data": "sizeD" }, 
      { "data": "comment" }, 
      { "data": "date" }, 
      { "data": "job" }, 
      { "data": "test" }, 
      { "data": "result" }, 
     ], 
     "language": 
     { 
      //translation to Polish 
      processing:  "Przetwarzanie...", 
      search:   "Szukaj:", 
      lengthMenu:  "Pokaż _MENU_ pozycji", 
      info:   "Pozycje od _START_ do _END_ z _TOTAL_ łącznie", 
      infoEmpty:  "Pozycji 0 z 0 dostępnych", 
      infoFiltered: "(filtrowanie spośród _MAX_ dostępnych pozycji)", 
      infoPostFix: "", 
      loadingRecords: "Wczytywanie...", 
      zeroRecords: "Nie znaleziono pasujących pozycji", 
      emptyTable:  "Brak danych", 
      paginate: 
      { 
      first:  "Pierwsza", 
      previous: "Poprzednia", 
      next:  "Następna", 
      last:  "Ostatnia" 
      }, 
      aria: 
      { 
      sortAscending: ": aktywuj, by posortować kolumnę rosnąco", 
      sortDescending: ": aktywuj, by posortować kolumnę malejąco" 
      }, 
     }, 
     }); 
     new $.fn.dataTable.Buttons(table, 
     { 
     buttons: 
     [ 
      { 
      text: 'Odśwież', 
      action: function (e, dt, node, config) 
      { 
       table.ajax.reload(null, false); 
      } 
      } 
     ] 
    }); 

    table.buttons().container() 
     .appendTo($('.col-sm-6:eq(0)', table.table().container())); 

    $('#example tbody').on('click', 'tr', function() 
    { 
     $(this).toggleClass('selected'); 
     selected1.push(table.row(this).data().id); 
    }); 
    $(this).toggleClass('selected'); 
    this.set('selected',selected1); 
    }, 
    }); 

Und hier ist die Geringschätzung:

deprecation: Eine Eigenschaft lista-soczewek-Frontend @ Ansicht: -Dose :: ember400
wurde innerhalb der didInsertElement Haken modifiziert. Sie sollten niemals die Eigenschaften von Komponenten, Diensten oder Modellen während didInsertElement ändern, da dies zu einer erheblichen Leistungsbeeinträchtigung führt ( ).

[deprecation ID: glut-views.dispatching-ändern-Eigenschaft].. bei logDeprecationStackTrace (http://192.168.11.13:4202/assets/vendor.js:16449:19) bei HANDLERS (anonyme Funktion) (http://192.168.11.13:4202/assets/vendor.js:16556:7) bei raiseOnDeprecation (http://192.168.11.13:4202/assets/vendor.js:16479:12) bei HANDLERS (anonyme Funktion) (http://192.168.11.13:4202/assets/vendor.js:16556:7) bei invoke (http://192.168.11.13:4202/assets/vendor.js:16572:7) bei deprecate (http://192.168.11.13:4202/assets/vendor.js:16540:32) bei Object.deprecate (http://192.168.11.13:4202/assets/vendor.js:25882:37) bei Class.exports.default._emberMetalMixin.Mixin.create._Mixin $ create.scheduleRevalidate (http://192.168.11.13:4202/assets/vendor.js:52831:22) bei http://192.168.11.13:4202/assets/vendor.js:23046:32

Was kann ich in diesem Fall tun? Wie kann die Abwertung beseitigt werden?

Grüße, Rafał

Answer 1

Tabellendaten in Route model hook Vorbereiten und weitergegeben Komponente oder in init Teil der Komponente. Momentan sieht es nicht so aus. und ich bin nicht vertraut mit jquery data table design .. ich werde eine Problemumgehung vorschlagen, um diese Abwertung zu mildern.

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    selected1: undefined, 
    init() { 
     this._super(...arguments); 
     this.set('selected1', []); 
    }, 
    didInsertElement() { 
     var table = this.$('#example').DataTable 
      ({ 
       "bAutoWidth": false, 
       "responsive": true, 
       "ajax": '/lens', 
       "columns": 
       [ 
        { "data": "id" }, 
        { "data": "type" }, 
        { "data": "sizeA" }, 
        { "data": "sizeB" }, 
        { "data": "sizeC" }, 
        { "data": "sizeD" }, 
        { "data": "comment" }, 
        { "data": "date" }, 
        { "data": "job" }, 
        { "data": "test" }, 
        { "data": "result" }, 
       ], 
       "language": 
       { 
        //translation to Polish 
        processing: "Przetwarzanie...", 
        search: "Szukaj:", 
        lengthMenu: "Pokaż _MENU_ pozycji", 
        info: "Pozycje od _START_ do _END_ z _TOTAL_ łącznie", 
        infoEmpty: "Pozycji 0 z 0 dostępnych", 
        infoFiltered: "(filtrowanie spośród _MAX_ dostępnych pozycji)", 
        infoPostFix: "", 
        loadingRecords: "Wczytywanie...", 
        zeroRecords: "Nie znaleziono pasujących pozycji", 
        emptyTable: "Brak danych", 
        paginate: 
        { 
         first: "Pierwsza", 
         previous: "Poprzednia", 
         next: "Następna", 
         last: "Ostatnia" 
        }, 
        aria: 
        { 
         sortAscending: ": aktywuj, by posortować kolumnę rosnąco", 
         sortDescending: ": aktywuj, by posortować kolumnę malejąco" 
        }, 
       }, 
      }); 
     new $.fn.dataTable.Buttons(table, 
      { 
       buttons: 
       [ 
        { 
         text: 'Odśwież', 
         action: function (e, dt, node, config) { 
          table.ajax.reload(null, false); 
         } 
        } 
       ] 
      }); 

     table.buttons().container() 
      .appendTo($('.col-sm-6:eq(0)', table.table().container())); 

     var _this = this; 
     $('#example tbody').on('click', 'tr', function() { 
      $(this).toggleClass('selected'); 
      var selected1 = _this.get('selected1'); 
      selected1.pushObject(table.row(this).data().id); 
     }); 
    }, 
});