agents rx

components.agent-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  didInsertElement() {
    const comp = this;
    let values$ = Bacon.fromEvent(this, 'test');
    values$.onValue(function(value) {
                 Bacon.later(500, value)
                   .takeUntil(values$)                   
                   .onValue(comp.doNewValue);
      				 });  
  },

  doNewValue(value) {
    console.log('acting on: ', value);
  },
  
  actions: {
    didValueChange(value) {
      this.trigger('test', value);
    }
  }
});

components.number-input.js

import Ember from 'ember';

const DOWN = 40,
      UP   = 38;

export default Ember.TextField.extend({

  value: '5',
  numValue: function() {
    return parseInt(this.get('value'), 10);
  }.property('value'),
    
  valueValid: function() {   
    return !isNaN(this.get('value'));  
  }.property('value'), 
  valueInvalid: Ember.computed.not('valueValid'),
  
  didInsertElement() {
    console.log('done!');
  },
  
  keyDown(e) {
    if (this.get('valueInvalid')) { return; }
    switch(e.keyCode) {
      case DOWN:
        this.decrementProperty('value');
        this.input();
        break;
      case UP:
        this.incrementProperty('value');
        this.input();
        break;
    }
  },                                      
  
  input() {
    if (this.get('valueValid')) {
    	this.get('onValueChange')(this.get('value'));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{agent-input}}

templates.components.agent-input.hbs

{{number-input onValueChange=(action "didValueChange")}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "bacon": "https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.94/Bacon.min.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    
  }
}