mixin demo

components.demo-component.js

import Ember from 'ember';
import * as DemoMixin from './../mixins/DemoMixin'; 

export default Ember.Component.extend(DemoMixin ,{
  init(){
  	this._super(...arguments);
    console.log('demo component inited');
  },
  hello(){
  	console.log('overrided in demo component')
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

mixins.DemoMixin.js

import Ember from 'ember';

export default Ember.Mixin.create({
  init(){
  	this._super(...arguments);
    console.log('demo mixin   inited');
  },
  didInsertElement(){
    console.log('demo mixin did insert element');
  },
  hello(){
    //to be override
     console.log('demo mixin hello');
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('demo-route');
});

export default Router;

routes.demo-route.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model(){
     let lineChart = [
            {
              name: 'John',
              values: [7512, 8093, 14731, 10082],
              color: 'red'
            },
            {
              name: 'Anne',
              values: [9923, 9789, 8309, 10810],
              color: 'green'
            },
            {
              name: 'Robert',
              values: [6039, 7093, 4020, 9501],
              color: 'blue'
            }
          ];
    return {
    	lineChart: lineChart,
      id: 1
    };
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#link-to 'demo-route'}}
demo
{{/link-to}}
{{outlet}}
<br>
什么情况下demo mixin 的didInsertElement 会被触发呢?
<br>

templates.components.demo-component.hbs

{{yield}}

templates.demo-route.hbs

<hr>
{{#each model.lineChart as |chart| }}
   <span>  {{chart.name}} </span><br>
{{/each}}
<hr>
<h2>demo componet</h2>
{{demo-component data=model.lineChart}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}