Ember: send action from one component to another

Question

I just started working with Ember to try and learn it's conventions and am having trouble sending an action from one Component to another. I would greatly appreciate some guidance on this.

I am able to display Components, and have figured out how to nest Components within Components. I have created a parent component images-parent which contains 2 sub components called large-image and thumbnail-list . When I click on a thumbnail in the thumbnail-list component I want to take the src of the clicked thumbnail and use it to replace the src of the image in the large-image component. I'm having trouble figuring out how to approach this in Ember.

Here is a fiddle to my code so far: http://jsfiddle.net/81dLb2xc/

Here are my Templates:

<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>

And 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);
    }
  }
})

Answer 1

In a nutshell you don't communicate in, but you can communicate out. That doesn't mean you can't bind a property to a child component that lives in the parent component's scope. An example will explain this best.

Javascript

App.ImagesParentComponent = Em.Component.extend({
    src: 'http://placeimg.com/200/200',
    actions:{
        changePic: function(src){
            this.set('src', src);
        }
    }
});

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;
            this.sendAction('changePic', source);
        }
    }
});

Template

<script type="text/x-handlebars" id="components/large-image">
  <div class="large-img-container">
    <img alt="large image" class="js-img" {{bind-attr src=src}} />
  </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 src=src}}

  <p>Click the Image below to swap out the larger image</p>

  {{thumbnail-list changePic='changePic'}}
</script>

http://jsfiddle.net/yLLhrbr3/