Telling your parents you've rendered

components.slide-list-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNames: ['slide-list__list__item'],
  didInsertElement() {
    this._super(...arguments);
    this.get('childRendered')();
  }
});

components.slide-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  childCount: 0,
  items: [],
  tagName: 'div',
  classNames: ['slide-list'],
  initialCount: 5,
  resizeList() {
    var self = this,
        ul = self.$('.slide-list__list'),
        li = self.$('.slide-list__list__item'),
        w = Math.ceil(self.$().outerWidth()),
        li_w = Math.ceil(w/self.get('initialCount')),
        ul_w = Math.ceil($(li).length * li_w);
    $(li).outerWidth(li_w);
    $(ul).outerWidth(ul_w);
  },
  didInsertElement() {
    this._super(...arguments);
    this.$(window).on('resize', this.resizeList);
  },
  actions: {
    childRendered() {
      var self = this;
      self.set('childCount', self.get('childCount') + 1);
      if(self.get('childCount') === self.get('items.length')) {
        self.resizeList();
      }
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  items: Ember.computed(function(){
    var a = [];
    var s = 21;
    while(s--) a.push({text: s});
    return a;
  })
});

styles.app.css

* {
  box-sizing: border-box;
}

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

.container {
  background-color: black;
  width: 100%;
}

.slide-list{
  
}

  .slide-list__window {
      margin: 0;
      padding: 0;
      overflow-x: scroll;
      overflow-y: hidden;
      width: 100%;
  }

  .slide-list__list {
    margin: 0;
    padding: 0;
    width: 10000px;
  }

	.slide-list__list:after {
    content: "";
    display: table;
    clear: both;
  }

  .slide-list__list__item {
    border: 1px solid grey;
    color: white;
    float: left;
    list-style: none;
    padding: 2rem 0;
    margin: 0;
    text-align: center;
  }

templates.application.hbs

<div class="container">
  {{#slide-list items=items as |item childRendered|}}
    {{#slide-list-item childRendered=childRendered}}
      {{item.text}}
    {{/slide-list-item}}
  {{/slide-list}}
</div>

templates.components.slide-list-item.hbs

{{yield}}

templates.components.slide-list.hbs

<div class="slide-list__window">
  <ul class="slide-list__list">
    {{#each items as |item|}}
      {{yield item (action "childRendered")}}
    {{/each}}
  </ul>
</div>

twiddle.json

{
  "version": "0.10.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.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}