MatchUp

controllers.application.js

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  total: 80,
  value1: 40,
  value2: 20,
  value3: 20,
  matchUp: Ember.computed('value1','value2','value3', function() {
    let v1 = this.get('value1') * 1,
        v2 = this.get('value2') * 1,
        v3 = this.get('value3') * 1,
        total = this.get('total') * 1;
    return (v1+v2+v3)==total;
  }),

  actions: {
    matchIt: function(whch) {
      //alert(whch);
      let v1 = this.get('value1') * 1,
          v2 = this.get('value2') * 1,
          v3 = this.get('value3') * 1,
          total = this.get('total') * 1;

      let dif = total - v1 - v2 - v3;

      if (whch == 1) {
        this.set('value'+whch, (v1 + dif));
      } else if (whch == 2) {
        this.set('value'+whch, (v2 + dif));
      } else if (whch == 3) {
        this.set('value'+whch, (v3 + dif));
      }
    }
  }
});

templates.application.hbs

<ul>
  <li>{{input value=value1}}{{#unless matchUp}}<span {{action "matchIt" 1}}>Match</span>{{/unless}}</li>
  
  <li>{{input value=value2}}{{#unless matchUp}}<span {{action "matchIt" 2}}>Match</span>{{/unless}}</li>
  
  <li>{{input value=value3}}{{#unless matchUp}}<span {{action "matchIt" 3}}>Match</span>{{/unless}}</li>
  
  <li>-------</li>
  <li>{{input value=total}}</li>
</ul>
{{matchUp}}