New Twiddle

components.time-slot.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    removeController(){
      this.attrs.removeController();
    },
    resetController(){
      this.attrs.resetController();
    },
    addController(){
      this.attrs.addController();
    }
  }
});

controllers.application.js

import Ember from 'ember';


export default Ember.Controller.extend({
  weekdays: [
		'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday'
  ],
  actions: {
    removeController() {
      this.send('removeRoute');
    },
    resetController() {
      this.send('resetRoute');
    },
    addController(){
      this.send('addRoute');
    }
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  listOfDates: [],
  beforeModel(){
    this.reset();
  },
  model(){
    return this.get('listOfDates');
  },
  reset(){
    let dt = this.get('listOfDates');
    dt.clear();
    // dt.pushObject({
    //   day: 'Monday',
    //   start: '2016-08-08T04:32:38Z',
    //   end: '2016-08-08T04:32:38Z'
    // });
    // dt.pushObject({
    //   day: 'Tuesday',
    //   start: '2016-08-09T04:32:38Z',
    //   end: '2016-08-09T04:32:38Z'
    // });

  },
  setupController(controller, model) {
    this._super(controller, model);
    console.log(model);
  },

  actions: {
    addRoute(day) {
      console.log(day)
      this.get('listOfDates').pushObject(day);
    },
    removeRoute() {
      this.get('listOfDates').popObject();
    },
    resetRoute() {
      this.reset();
    }
  }

});

templates.application.hbs

{{#each weekdays as |day index|}}
<div class='date-picker__dayline'>
    {{time-slot
      day=day
      removeController=(action 'removeController')
      resetController=(action 'resetController')
      addController=(action 'addController')
    }}
</div>
{{/each}}
{{#each model as |date|}}

  {{date.day}}

{{/each}}
<a class="expanded button" {{action 'saveDates'}}>Save</a>

templates.components.time-slot.hbs

<button class="hollow button secondary"
        type="button"
        name="button"
        onclick={{action addController day}}>Morning
</button>
{{day}}
<div class="date-picker__time_status">
  <input type="checkbox" {{action 'removeController'}}>
  {{jquery-timepicker}}
</div>

<button type="button" {{ action 'resetController' }}>Reset</button>

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}