Question

我正在使用jQuery Datatables在ember中编写应用程序而且我已经弃用了，这是我的代码：

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

以下是弃用：

弃权：属性   lista-soczewek-frontend @ view：-outlet :: ember400
在里面进行了修改   didInsertElement钩子。你永远不应该改变属性   因为它，在didInsertElement期间的组件，服务或模型   导致性能显着下降。

[弃用号：   烬-views.dispatching - 修改 - 属性]           at logDeprecationStackTrace（http://192.168.11.13:4202/assets/vendor.js:16449:19）           在HANDLERS。（匿名函数）（http://192.168.11.13:4202/assets/vendor.js:16556:7）           在raiseOnDeprecation（http://192.168.11.13:4202/assets/vendor.js:16479:12）           在HANDLERS。（匿名函数）（http://192.168.11.13:4202/assets/vendor.js:16556:7）           在调用（http://192.168.11.13:4202/assets/vendor.js:16572:7）           在弃用（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）           在Class.exports.default._emberMetalMixin.Mixin.create._Mixin $ create.scheduleRevalidate   （http://192.168.11.13:4202/assets/vendor.js:52831:22）           在http://192.168.11.13:4202/assets/vendor.js:23046:32

在这种情况下我该怎么办？如何消除弃用？

问候，Rafał

Answer 1

在路由model挂钩中准备表数据并传递给组件或组件的init部分。目前它看起来并不吝啬。我不熟悉jquery数据表设计。我会建议解决方法来减轻这种弃用。

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

Ember弃用jQuery Datatables在didInsertElement钩子

1 个答案: