Skip to content

Instantly share code, notes, and snippets.

@KTKate
Last active August 28, 2015 03:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save KTKate/e9a8186099f59379c1e3 to your computer and use it in GitHub Desktop.
Save KTKate/e9a8186099f59379c1e3 to your computer and use it in GitHub Desktop.
Why Won't my component click
import Ember from 'ember';
export default Ember.Controller.extend({
didIClick: 'No Clicks!',
enabled: false,
actions: {
toggleEnabled(){
this.toggleProperty('enabled');
}
}
});
<table class='hoverable bordered'>
<thead>
<tr class='active'>
<th>oh</th>
<th>hey</th>
<th>there</th>
<th>yo</th>
</tr>
</thead>
{{#link-to 'funStuff' tagName='tr'}}
{{pseudo-row didIClick=didIClick }}
{{/link-to
</table>
<br />
<h4>Click the purple component</h4>
{{didIClick}}
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['toggle-dot'],
attributeBindings: ['type', 'value', 'checked', 'model'],
tagName: 'input',
type: 'checkbox',
checked: false,
_updateElementValue: Ember.on('didInsertElement', function() {
this.set('checked', this.$().prop('checked'));
}),
change: function(){
this.sendAction(this.get('model'));
this._updateElementValue();
}
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: '',
click(){
this.set('didIClick', 'Clicked!!');
}
});
<td>{{toggle-dot checked=enabled value=enabled action='toggleEnabled'}}
</td>
<td class='deep-purple lighten-5'>Stuff</td>
<td class='deep-purple lighten-5'>and</td>
<td class='deep-purple lighten-5'>things</td>
.toggle-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: lightgrey;
border: 2px solid #fff;
box-shadow: 0 0 0 2px lightgrey;
margin: auto;
}
.toggle-dot.enabled {
background-color: #2186CA;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #2186CA;
}
{
"version": "0.4.9",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js",
"materialize": "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment