Skip to content

Instantly share code, notes, and snippets.

@runspired
Last active August 29, 2015 14:18
Show Gist options
  • Save runspired/1539a7ef3caac25b2b3c to your computer and use it in GitHub Desktop.
Save runspired/1539a7ef3caac25b2b3c to your computer and use it in GitHub Desktop.
Explicit Component Nesting
import Ember from "ember";
export default Ember.Component.extend({
active: false,
slideshow: null,
init: function() {
this._super();
var slideshow = this.get('slideshow');
Ember.assert("Slide has a Slideshow", slideshow);
slideshow.addSlide(this);
}
});
import Ember from "ember";
export default Ember.Component.extend({
slides: Ember.A(),
addSlide: function (slide) {
this.get('slides').addObject(slide);
},
actions : {
next: function() {
// advance slide
},
prev: function() {
// prev slide
}
}
});
{{#slideshow-wrapper as |slideshow|}}
{{#slideshow-item slideshow=slideshow}}
<div class="nextButton" {{action "prev" target=slideshow}}>
<h1>My Slide</h1>
<p>Something interesting to share.</p>
<div class="nextButton" {{action "next" target=slideshow}}>
{{/slideshow-item}}
{{/slideshow-wrapper}}
@runspired
Copy link
Author

This method is a little more verbose, but it makes the action flow extremely clear to anyone diving into the code, and makes what constitutes a slide or a next/prev button very flexible without needing to write any
code to support different desired configurations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment