Ember Component Events

Ember Component Events

by Nirvanachain

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars">
  {{outlet}}
  {{images-parent}}
 
</script>


<script type="text/x-handlebars" id="components/large-image">
  <div class="large-img-container">
    <img alt="large image" class="js-img" src="http://placeimg.com/200/200" />
  </div>
</script>

<script type="text/x-handlebars" id="components/thumbnail-list">
  <ul class="thumbnail-container">
    <li><img src="http://placekitten.com/110/110" {{action "thumbnailClicked"}} /></li>
    <li><img src="http://fillmurray.com/110/110" {{action "thumbnailClicked"}} /></li>
  </ul>
</script>

<script type="text/x-handlebars" id="components/images-parent">
  {{large-image}}
  
  <p>Click the Image below to swap out the larger image</p>
  
  {{thumbnail-list}}
</script>

CSS

.nav-container {
    border-bottom: 1px solid #999
}
.nav > li {
    display: inline-block;
}

JavaScript

App = Ember.Application.create();



App.ThumbnailListComponent = Ember.Component.extend({
    actions: {
        thumbnailClicked: function() {
            // How do I send this value to the large-image component
            // so that the large-image src attibute is replaced?
            var source = event.target.src;
            console.log(source);
        }
    }
})