如何在 ember 中覆盖附加组件的属性

Question

我想使用 ember-models-table 插件并为 customIcons 设置默认值和 customClasses 所以我添加了一个名为 form-table

的组件

app/components/form-table.js

并在其中添加了以下代码从 'ember-models-table/components/models-table';

导入 modelsTableComponent

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 并且在控制器文件夹下的 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 访问属性。由于属性将始终被定义，因此这将检索您在扩展中定义的属性。您仍然可以按照 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"
  }
});

同时确保删除 auto-generated 模板文件（如果有的话）。否则将覆盖继承的模板。

同样在 Ember 2.0 版本中不再需要 layoutName。

如何在 ember 中覆盖附加组件的属性

How to override properties of a add on in ember

ember.js

ember-cli

ember-addon