How to override properties of a add on in ember

Question

I wan to use ember-models-table addon and set the default values for customIcons and customClasses so I have added a component called form-table

app/components/form-table.js

and added the following code to it 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"
        }));      
    }
});

but when I call

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

from the application.hbs under the templates folder and having the following code inside application.hbs under the controller folder I see nothing. And I don't get any error either.

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"
            }
        ]
    },

});

Howerver if I replace my code in the application.hbs file from

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

to

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

everything works. Does that mean I can't extend an add on ?

How do you make `table` is accessible in `application.hbs` ? — Ember Freak, Jan 31 '17 at 12:44
@kumkanillam I have modified my question it is actually is inside the controller. — Zardaloop, Jan 31 '17 at 12:49

score 1 · Accepted Answer · edited Jan 31 '17 at 17:21

You missed the template for your {{form-table}} component. If you don't have to change components layout just specify it's template when extending:

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

Oh just noted from @kumkanillam answer that you also using didInsertElement hook wrong. DidInsertElement hook is meant for manipulation of dom elements. If you like to provide different defaults to {{models-table}} component you should define customIcons and customClasses as properties of your extended component. ember-models-table uses getWithDefault to access the property. Since properties would be always defined this will retrieve your properties defined in extend. You are still able to pass custom values to component on declaration as kumkanillam suggested.

So your extended component should look like:

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

also make sure to delete the auto-generated template file if you have one. Otherwise that will override the inherited template.

Also in Ember 2.0 version the layoutName is no longer is needed.

Is `layoutName` is necessary ?.when we are extending and using the same parent component for rendering. — Ember Freak, Jan 31 '17 at 13:23
Thanks guys I have added your suggested code but still not shoiwng anything . Are you sure about layoutName? Cheers — Zardaloop, Jan 31 '17 at 13:48
ok thanks Guys, the issue was that I had a template for the extended component since ember-cli automatically generates a template. I have deleted that and bang it worked :) — Zardaloop, Jan 31 '17 at 14:07
@kumkanillam: I guess that depends on component you are extending. If component declares a `layout` or `layoutName` it might not be necessary. If it uses template lookup by name it's necessary cause your extended component has another name and ember wouldn't find the template. — jelhan, Jan 31 '17 at 17:53

How to override properties of a add on in ember

1 Answers1