Question

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

的组件

应用/组件/形状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}}

从templates.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。

如何覆盖ember中的添加属性

1 个答案: