"This time we gonna create something unique, different, that challenges the laws of web design."
Any UX guy starting a new project.
I have plenty of cool graphs to show and interact with!
I will stay here while the user plays with that insane top-container
If you are bored I am also a multi-step flow to enable some fairly useless feature or subscribe to our spamletter
{{outlet 'top'}}
{{outlet 'left'}}
{{outlet 'right'}}
export default Ember.Route.extend({
renderTemplate() {
this.render('posts/index', {
into: 'main',
outlet: 'top',
controller: 'posts.index'
});
this.render('posts/graph', {
into: 'main',
outlet: 'left',
controller: 'posts.graphs'
});
this.render('subscribe', {
into: 'main',
outlet: 'right',
controller: 'subscribe'
});
}
});
New
{{posts-graph ...}}
{{#if isListMode}}
{{posts-list posts=posts}}
{{else}}
{{posts-new post=newPost}}
{{/if}}
{{subscribe-flow}}
// posts controller
export default Ember.Controller.extend({
mode: 'list',
posts: [],
newPost: null,
isListMode: computed.equal('mode', 'list'),
isCreateMode: computed.equal('mode', 'new')
});
// posts route
export default Ember.Route.extend({
controllerName: 'posts',
model() {
return this.store.find('posts');
},
setupController(controller, model) {
controller.set('mode', 'list');
controller.set('hosts', model);
}
});
// posts.new route
export default Ember.Route.extend({
controllerName: 'posts',
model() {
return this.store.createRecord('post');
},
setupController(controller, model) {
controller.set('mode', 'new');
controller.set('newHost', model);
}
});
// posts controller
export default Ember.Controller.extend({
mode: 'list',
posts: [],
newPost: null,
componentName: computed('mode', function() {
return `posts-${this.get('mode')}`;
})
});
{{component componentName posts=posts post=newPost}}
// posts controller
export default Ember.Controller.extend({
actions: {
savePost(post) {
post.save().then( ()=> {
this.transitionToRoute('posts');
}
}
}
});
{{posts-new post=newPost submit='savePost'}}
// posts-new component
export default Ember.Component.extend({
click() {
this.sendAction(this.get('post'));
}
});
// posts controller
export default Ember.Controller.extend({
actions: {
savePost(post) {
post.save().then( ()=> {
this.transitionToRoute('posts');
}
}
}
});
{{posts-new post=newPost submit=(action 'savePost')}}
// posts-new component
export default Ember.Component.extend({
click() {
this.attrs.submit(this.get('post'));
}
});
Thanks!