channel-picker-component-example

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({

  values: {
    0: 10,
    1: 15,
    2: 7,
    3: 19,
    4: 78,
    5: 3
  },

  indexes: ['2','4','1','3','5','2','0','1','0','3'],

  init() {
    this._super(...arguments);
    Ember.run.later(this, this.generateNewValues, 1000);
  },

  generateNewValues() {
    let values = {};

    for (let i=0; i<10; i++) {
      values[i] = Math.random();
    }

    this.set('values', values);

    Ember.run.later(this, this.generateNewValues, 1000);
  }
});

application.template.hbs

<h2 id="title">Welcome to Ember</h2>

{{outlet}}

{{channel-picker values=values indexes=indexes}}

channel-picker.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  indexesLength: Ember.computed.alias('indexes.length')
  
});

channel-picker.template.hbs

Indexes length: {{indexesLength}}

{{#each indexes as |delta index|}}
  <div class="bs-qty-{{indexesLength}} bs-element-{{index}}  ">
    <span class="value">{{get values delta}}</span><span class="unit">{{unit}}</span>
  </div>
{{/each}}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}