首页 文章

Ember弃用jQuery Datatables在didInsertElement钩子中被修改

提问于
浏览 次
0

我正在使用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);
     },
    });

以下是弃用：

DEPRECATION：在didInsertElement钩子中修改了lista-soczewek-frontend @ view：-outlet :: ember400的属性 . 在didInsertElement期间，您永远不应更改组件，服务或模型的属性，因为它会导致性能显着下降 . [弃用id：ember-views.dispatching-modify-property]在HANDLERS的logDeprecationStackTrace（http://192.168.11.13:4202/assets/vendor.js:16449:19） . （匿名函数）（http：//192.168） .11.13：4202 / assets / vendor.js：16556：7）在HANDLERS的raiseOnDeprecation（http://192.168.11.13:4202/assets/vendor.js:16479:12） . （匿名函数）（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）在Class.exports.default._emberMetalMixin.Mixin.create的Object.deprecate（http://192.168.11.13:4202/assets/vendor.js:25882:37） . _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

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

问候，拉法

javascript ember.js datatables

1 回答

  • 0

    在路径 model hook中准备表数据并传递给组件或组件的 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);
        });
    },
});
    回复于

相关问题