Ember.js 如何在ember中重写外接程序的属性

我想使用余烬模型表插件并设置自定义图标和自定义类的默认值 所以我添加了一个名为FormTable的组件

app/components/form-table.js

并在其中添加了以下代码 从“余烬模型表/组件/模型表”导入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}}

从templates文件夹下的application.hbs中，在controller文件夹下的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}}

到

---

一切正常。这是否意味着我无法扩展附加组件

您错过了

{{form table}

组件的模板。如果不必更改组件布局，只需在扩展时指定其模板即可：

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

哦，刚才从@kumkanillam答案中注意到，您也使用了

didinertelement

hook错误。DidInsertElement钩子用于操作dom元素。如果您希望为

{{models table}

组件提供不同的默认值，则应将

自定义图标

和

自定义类

定义为扩展组件的属性。ember models表用于访问属性。由于总是定义属性，因此这将检索在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。

如何在

应用程序中访问
表
。hbs
？@kumkanillam我修改了我的问题，它实际上在控制器内部。
layoutName
是否必要？。当我们扩展并使用相同的父组件时渲染。谢谢伙计们，我已经添加了你们建议的代码，但仍然没有显示任何内容。你确定layoutName吗？谢谢大家，问题是我有一个扩展组件的模板，因为ember cli会自动生成一个模板。我已经删除了它，并且它起了作用：）@kumkanillam：我想这取决于您正在扩展的组件。若组件声明了一个
布局
或
布局名
，那个么它可能是不必要的。如果它使用按名称查找模板，这是必要的，因为扩展组件有另一个名称，而ember找不到模板。
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"
  }
});