pin input

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Notifying a property change on a property passed into a child component',
  description: 'There is a parent component with some buttons. When a user clicks on a button, the buttons\'s action changes the property. Since the changed property is passed into the wrapped component, you would expect that it\'s observer would fire also. But it does not. To try this, just type in 1233 and you will see that the last 3 will not render.'
});

application.template.hbs

<h1>{{appName}}</h1>
<p>{{description}}</p>
{{pin-entry}}

pin-entry.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  pinValue: null,
  _cachedValue: null,
  numbers: [1, 2, 3, 4],
  actions: {
    addNumber: function (number) {
      
      this.set('pinValue', number);
      
      if (this.get('_cachedValue') === number) {
         this.notifyPropertyChange('pinValue');
      }
      
      this.set('_cachedValue', number);
      
    }
  }
});

pin-entry.template.hbs

{{pin-input pinValue=pinValue}}
{{#each numbers as |num|}}
  <button {{action "addNumber" num}}>{{num}}</button>
{{/each}}

pin-input.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  value: null,
  
  _onChange: function() {
  	Ember.run.next(this, function() {
      if (this.get('pinValue') !== null) {        
        var currVal = this.$('.pin-input').val();
      	var newVal  = currVal + this.get('pinValue');
        this.$('.pin-input').val(newVal);
      }
    });
  },
  
  
  onInsertAddObserver: function() {
    var c = this.get('targetObject');
    c.addObserver('pinValue', this, this._onChange)
  }.on('didInsertElement'),
  
  
  // uncomment this observer to see that observing a property change does not work here
  /*
  onInsertAddObserver: function() {
    this._onChange();
  }.observes('pinValue'),
  */
  
});

pin-input.template.hbs

<input class="pin-input" type=text value={{value}}>

twiddle.json

{
  "version": "0.4.14",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}