Как переопределить свойства надстройки в ember

Question

Я хочу использовать дополнение ember-models-table и установить значения по умолчанию для customIcons и customClasses, чтобы я добавил компонент с именем form-table

приложение / компоненты /form-table.js

и добавил в него следующий код для импорта modelsTableComponent из таблицы ember-models-table/components/models-table;

import modelsTableComponent from 'ember-models-table/components/models-table';

export default modelsTableComponent.extend({
    didInsertElement: function () {
       this._super(...arguments);

        this.$().attr('customIcons', Ember.Object.create({
            "sort-asc": "fa fa-chevron-down",
            "sort-desc": "fa fa-chevron-up",
            "column-visible": "fa fa-check-square-o",
            "column-hidden": "fa fa-square-o",
            "nav-first": "fa fa-chevron-left",
            "nav-prev": "fa fa-angle-left",
            "nav-next": "fa fa-angle-right",
            "nav-last": "fa fa-chevron-right",
            "caret": "fa fa-caret-down",
            "expand-row": "fa fa-plus",
            "collapse-row": "fa fa-minus"
        }));

        this.$().attr('customClasses', Ember.Object.create({
            "clearFilterIcon": "fa fa-times form-control-feedback",
            "clearAllFiltersIcon": "fa fa-times-circle-o"
        }));      
    }
});

но когда я звоню

{{form-table
          data=table.data
          columns=table.columns}}

из application.hbs под папкой templates и имеющего следующий код внутри application.hbs под папкой контроллера я ничего не вижу. И я тоже не получаю никакой ошибки.

import Ember from 'ember';

export default Ember.Controller.extend({
    table: {
        data: [
            Ember.Object.create({ id: 1, firstName: 'john', lastName: 'Smith', city: "CityA" }),
            Ember.Object.create({ id: 1, firstName: 'bob', lastName: 'Smith', city: "CityB" }),
        ],
        columns: [
            {
                "propertyName": "id",
                "title": "ID"
            },
            {
                "propertyName": "firstName",
                "title": "First Name"
            },
            {
                "propertyName": "lastName",
                "title": "Last Name"
            },
            {
                "propertyName": "city",
                "title": "City"
            }
        ]
    },

});

Но если я заменю свой код в файле application.hbs с

{{form-table
              data=table.data
              columns=table.columns}}

в

{{models-table
              data=table.data
              columns=table.columns}}

все работает. Означает ли это, что я не могу расширить дополнение?

Answer 1

Вы пропустили шаблон для вашего {{form-table}} составная часть. Если вам не нужно менять расположение компонентов, просто укажите его шаблон при расширении:

export default modelsTableComponent.extend({
  layoutName: 'components/models-table'
});

О, только что отметил из @kumkanillam ответ, который вы также используете didInsertElement зацепить неправильно. Хук DidInsertElement предназначен для манипулирования элементами dom. Если вы хотите указать разные значения по умолчанию для {{models-table}} компонент, который вы должны определить customIcons а также customClasses как свойства вашего расширенного компонента. ember-models-table использует getWithDefaultчтобы получить доступ к собственности. Так как свойства будут всегда определены, это вернет ваши свойства, определенные в extend. Вы по-прежнему можете передавать пользовательские значения компоненту при объявлении, как предложил kumkanillam.

Так что ваш расширенный компонент должен выглядеть так:

import modelsTableComponent from 'ember-models-table/components/models-table';

export default modelsTableComponent.extend({
  layoutName: 'components/models-table',
  customIcons: {
    "sort-asc": "fa fa-chevron-down",
    "sort-desc": "fa fa-chevron-up",
    "column-visible": "fa fa-check-square-o",
    "column-hidden": "fa fa-square-o",
    "nav-first": "fa fa-chevron-left",
    "nav-prev": "fa fa-angle-left",
    "nav-next": "fa fa-angle-right",
    "nav-last": "fa fa-chevron-right",
    "caret": "fa fa-caret-down",
    "expand-row": "fa fa-plus",
    "collapse-row": "fa fa-minus"
  },
  customClasses: {
    "clearFilterIcon": "fa fa-times form-control-feedback",
    "clearAllFiltersIcon": "fa fa-times-circle-o"
  }
});

также обязательно удалите автоматически созданный файл шаблона, если он у вас есть.В противном случае это переопределит унаследованный шаблон.

Также в версии Ember 2.0 больше не нужно layoutName.