Skip to content

Instantly share code, notes, and snippets.

@ahielanravichandran
Created November 17, 2017 07:09
Show Gist options
  • Save ahielanravichandran/fb4a2abbcc342d94bc785536f383b57d to your computer and use it in GitHub Desktop.
Save ahielanravichandran/fb4a2abbcc342d94bc785536f383b57d to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
showHide: 'showHide',
blogContent: [
{
blogName: 'Ember Closure Actions',
authorName: 'Harris Jose',
blogDate: '28/8/17'
},
{
blogName: 'Ember Closure Actions',
authorName: 'Harris Jose',
blogDate: '28/8/17'
},
{
blogName: 'Ember Closure Actions',
authorName: 'Harris Jose',
blogDate: '28/8/17'
}
],
actions: {
hide() {
console.log('inside component hide action');
this.sendAction('showHide')
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
showHide() {
console.log('inside application controller');
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
buttonName: 'Hide',
actions: {
}
});
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('blog', { path: '/' });
});
export default Router;
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
showHide() {
console.log('inside application route');
}
}
});
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.main-container {
border: 1px solid red;
}
.blog-container {
text-align: center;
margin: 2px;
border: 1px solid blue;
}
.hide {
text-align: center;
margin: 10px auto;
width: 50%;
}
<div class="main-container">
{{outlet}}
</div>
{{my-component}}
<div class="hide">
<button>{{buttonName}}</button>
</div>
{{#each blogContent as |blog|}}
<div class="blog-container">
<div>Blog Name: {{blog.blogName}}</div>
<div>Author Name: {{blog.authorName}}</div>
<div>Published date: {{blog.blogDate}}</div>
<button {{action 'hide'}}>Hide</button>
</div>
{{/each}}
{
"version": "0.12.1",
"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.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment