Skip to content

Instantly share code, notes, and snippets.

@HenryVonfire
Last active March 9, 2016 09:50
Show Gist options
  • Save HenryVonfire/a87e835c7bb2a50ebce1 to your computer and use it in GitHub Desktop.
Save HenryVonfire/a87e835c7bb2a50ebce1 to your computer and use it in GitHub Desktop.
SO example
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{thumbnail-image
image="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"
alt="some text"
thumbnailWidth="40"
thumbnailHeight="40"
imageWidth="230"
imageHeight="230"}}
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
tagName:'img',
attributeBindings:['src','alt','width','height'],
isThumbnail:true,
didReceiveAttrs(){
this.set('src',this.get('image'));
this.set('width',this.get('thumbnailWidth'));
this.set('height',this.get('thumbnailHeight'));
},
click(){
if(this.get('isThumbnail')){
this.set('width',this.get('imageWidth'));
this.set('height',this.get('imageHeight'));
} else {
this.set('width',this.get('thumbnailWidth'));
this.set('height',this.get('thumbnailHeight'));
}
this.toggleProperty('isThumbnail');
}
});
{
"version": "0.6.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment