0

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

应用程序/组件/form-table.js

并添加以下代码 import modelsTableComponent from '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 并在控制器文件夹下的 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}}

一切正常。这是否意味着我不能扩展附加功能？

4

1 回答 1

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"
  }
});

如果您有自动生成的模板文件，请确保删除该文件。否则，这将覆盖继承的模板。

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

于 2017-01-31T13:00:09.647 回答