Skip to content

Instantly share code, notes, and snippets.

@gitjeff05
Last active November 4, 2015 14:10
Show Gist options
  • Save gitjeff05/38bd66b63e6745f2ea0d to your computer and use it in GitHub Desktop.
Save gitjeff05/38bd66b63e6745f2ea0d to your computer and use it in GitHub Desktop.
pin input
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.'
});
<h1>{{appName}}</h1>
<p>{{description}}</p>
{{pin-entry}}
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-input pinValue=pinValue}}
{{#each numbers as |num|}}
<button {{action "addNumber" num}}>{{num}}</button>
{{/each}}
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'),
*/
});
<input class="pin-input" type=text value={{value}}>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment