CODEWITHSUNDEEP
javascriptember.jsdatatables
rafal_zonk
rafal_zonk

Reputation: 76

Ember deprecation jQuery Datatables was modified inside the didInsertElement hook

I'm writing an app in ember using jQuery Datatables and I've got a deprecation, here is my 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);
     },
    });

And here is the deprecation:

DEPRECATION: A property of lista-soczewek-frontend@view:-outlet::ember400
was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation.

[deprecation id: ember-views.dispatching-modify-property] at logDeprecationStackTrace (http://192.168.11.13:4202/assets/vendor.js:16449:19) at HANDLERS.(anonymous function) (http://192.168.11.13:4202/assets/vendor.js:16556:7) at raiseOnDeprecation (http://192.168.11.13:4202/assets/vendor.js:16479:12) at HANDLERS.(anonymous function) (http://192.168.11.13:4202/assets/vendor.js:16556:7) at invoke (http://192.168.11.13:4202/assets/vendor.js:16572:7) at deprecate (http://192.168.11.13:4202/assets/vendor.js:16540:32) at Object.deprecate (http://192.168.11.13:4202/assets/vendor.js:25882:37) at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://192.168.11.13:4202/assets/vendor.js:52831:22) at http://192.168.11.13:4202/assets/vendor.js:23046:32

What can I do in that case? How to eliminate the deprecation?

Greetings, Rafał

Upvotes: 0

Views: 108

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

Prepare table data in route model hook and passed to component or in init part of the component. Currently it does not look ember way. and I am not familiar with jquery data table design..i will suggest workaround to mitigate this deprecation.

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);
        });
    },
});

Upvotes: 0

Related Questions