Ember.js ProgressBar based on sub-route page scroll

I developed my own solution based on computed properties of checkbox checked. However, how one would refactor the progressBar to be a computed property of how much the page scrolled on foo1 and foo2 templates rendered on the {{outlet}} of bar? I have seen this example, but I believe that a proper Ember.js solution to this problem may require a different approach... This is an example router:

this.route('bar', function() {
    this.route('foo1');
    this.route('foo2');
});

I created a JSFiddle with an example progressBar that is divided into four sections meaning that it would require four checkboxes to fill it to 100% (which is a rather static value at the moment.)

http://ift.tt/1Udbpt9

HBS

<section id="progressBarBase">
  <div {{bind-attr id="progressBarValue"}}>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>
<p>Checkbox 1: {{input type="checkbox" checked=checkValue_1}}{{progressBarController_1}}</p>

<p>Checkbox 2: {{input type="checkbox" checked=checkValue_2}}{{progressBarController_2}}</p>

JS

  // Progress Bar Value
  progressBarValue: "progress_0",
  checkValue_1: false,
  checkValue_2: false,
  // ProgressBar Controller #1
  progressBarController_1: Ember.computed('checkValue_1', function() {
    if (this.get('checkValue_1') === true) {
      if (this.get('progressBarValue') === "progress_0") {
        this.set('progressBarValue', 'progress_1');
      } else if (this.get('progressBarValue') === "progress_1") {
        this.set('progressBarValue', 'progress_2');
      } else if (this.get('progressBarValue') === "progress_2") {
        this.set('progressBarValue', 'progress_3');
      } else {
        this.set('progressBarValue', 'progress_4');
      }
    } else {
      if (this.get('progressBarValue') === "progress_4") {
        this.set('progressBarValue', 'progress_3');
      } else if (this.get('progressBarValue') === "progress_3") {
        this.set('progressBarValue', 'progress_2');
      } else if (this.get('progressBarValue') === "progress_2") {
        this.set('progressBarValue', 'progress_1');
      } else {
        this.set('progressBarValue', 'progress_0');
      }
    }
  }),
  // ProgressBar Controller #2
  progressBarController_2: Ember.computed('checkValue_2', function() {
    if (this.get('checkValue_2') === true) {
      if (this.get('progressBarValue') === "progress_0") {
        this.set('progressBarValue', 'progress_1');
      } else if (this.get('progressBarValue') === "progress_1") {
        this.set('progressBarValue', 'progress_2');
      } else if (this.get('progressBarValue') === "progress_2") {
        this.set('progressBarValue', 'progress_3');
      } else {
        this.set('progressBarValue', 'progress_4');
      }
    } else {
      if (this.get('progressBarValue') === "progress_4") {
        this.set('progressBarValue', 'progress_3');
      } else if (this.get('progressBarValue') === "progress_3") {
        this.set('progressBarValue', 'progress_2');
      } else if (this.get('progressBarValue') === "progress_2") {
        this.set('progressBarValue', 'progress_1');
      } else {
        this.set('progressBarValue', 'progress_0');
      }
    }
  }),

SCSS

#progressBarBase {
  width: 100%;
  height: 20px;
  .EmberCliProgressBar {
    border: 2px solid darken($ect-header-color, 75%);
    height: 20px;
    margin: 2px auto 2px auto;
    width: 200px;
    display: flex;
    div:nth-of-type(-n+4) {
      flex-grow: 1;
      margin: 0px;
      padding: 0px;
      height: 100%;
      flex-direction: column;
      flex-wrap: wrap;
    }
  }
  #progress_0 {
    @extend .EmberCliProgressBar;
  }
  #progress_1 {
    @extend .EmberCliProgressBar;
    div:nth-of-type(-n+1) {
      background: darken($ect-header-color, 25%);
    }
  }
  #progress_2 {
    @extend .EmberCliProgressBar;
    div:nth-of-type(-n+2) {
      background: darken($ect-header-color, 25%);
    }
  }
  #progress_3 {
    @extend .EmberCliProgressBar;
    div:nth-of-type(-n+3) {
      background: darken($ect-header-color, 25%);
    }
  }
  #progress_4 {
    @extend .EmberCliProgressBar;
    div:nth-of-type(-n+4) {
      background: darken($ect-header-color, 25%);
    }
  }
}
}