Events Playground

components.inner-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  value: 0,
  logger: "Default initial value",

  _willRender: function() {
    this.set('logger', this.get('logger') + '\nEVENT: willRender');
  }.on('willRender')
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
	setupController: function(controller, model) {
    this._super(controller, model);
  	this.controller.set('innerValue', 10);
    this.controller.set('appName', 'Ember Twiddle');
  }
});

// BINDAR startDate em algum atributo
// buscar pelo selector dos componentes pais (bar/milestone)
// para cada pai: (1 = title; 2 = date)
//   start = min(start_filho1, start_filho2)
//   end = max(end_filho1, end_filho2)
// varrer componentes na ordem do startDate
//   ocultar se colidir

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

div {
	padding: 0.5em;
}

.log-text-area {
	width: 100%;
  min-height: 300px;
}

templates.application.hbs

<h1>{{appName}}</h1>
{{outlet}}

templates.components.inner-component.hbs

<div>
	<span>Value: {{value}}</span>
</div>
<div>
	{{textarea value=logger class="log-text-area"}}
</div>

templates.index.hbs

<div>
	{{input type="range" min=0 max=300 value=innerValue}}
</div>
{{inner-component value=innerValue}}

twiddle.json

{
  "version": "0.10.5",
  "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.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}