Ember component what is layout and how to write the functions?

问题

I created a component, it gives the output as :

import Ember from 'ember';
import layout from '../templates/components/sample-work';

export default Ember.Component.extend({
  layout
});

When i try to add some init method like :

import Ember from 'ember';
import layout from '../templates/components/sample-work';

export default Ember.Component.extend({
  layout,
  init(){
    alert.log('hi');
  }
});

My component not at all called. what is the issue here? what is the correct way to handle the component here?

回答1:

Normally you do not need the layout within js file; because ember is an opinionated framework and it usually puts the component's js and hbs files to places where it can match them automatically by default: js is placed under components and hbs file is placed under templates\components.

In case; you put the template file to a place where it is not directly available to js file you need to import the layout. Take a look at the simple twiddle I have prepared for you. In this twiddle; my-component2's template file needs to be imported as layout field within corresponding js file.

回答2:

You should always call this._super(...arguments) inside your init function

来源：https://stackoverflow.com/questions/47882534/ember-component-what-is-layout-and-how-to-write-the-functions