Skip to content

Instantly share code, notes, and snippets.

@alexspeller
Forked from JackEllis/components.component-here.js
Last active February 24, 2017 22:31
Show Gist options
  • Save alexspeller/7de9d8c2698445aec0762b5eabe838c1 to your computer and use it in GitHub Desktop.
Save alexspeller/7de9d8c2698445aec0762b5eabe838c1 to your computer and use it in GitHub Desktop.
Demo of code
import Ember from 'ember';
export default Ember.Component.extend({
inputValue: null,
test: function() {
this.send('changeName', 'Name We Never See');
}.observes('totalUsers'),
actions: {
changeName(name) {
this.set('appName', name);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
data: [1, 2],
actions: {
addItem(item) {
this.get('data').pushObject(item);
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{component-here appName=appName totalUsers=data.length}}
<br>
<br>
<a href="#" {{action 'addItem' 44}}>Add Item & Change Application Name (This does not work fully)</a><br><br>
Now, this add item link is meant to add an item to the array (which it does) but if you go to the component-here.js file and look at the observer I've set-up, the application name should also change
<h3>appName input</h3>
<p>By editing this input, you can see the binding to the component isn't actually broken</p>
{{input value=appName}}
<a href="#" {{action 'changeName' 'Alex'}}>Change Name (This Works)</a>
<br><br>
Size of array<br>
{{totalUsers}}
<h2>appName in component: {{appName}}</h2>
This should be the same as the appname in the heading above
{
"version": "0.11.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.10.2",
"ember-data": "2.11.0",
"ember-template-compiler": "2.10.2",
"ember-testing": "2.10.2"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment