Question

我刚刚开始与Ember合作尝试学习它的约定，并且无法将动作从一个组件发送到另一个组件。我非常感谢有关这方面的一些指导。

我能够显示组件，并且已经找到了如何在组件中嵌套组件。我创建了一个父组件images-parent，其中包含2个名为large-image和thumbnail-list的子组件。当我点击thumbnail-list组件中的缩略图时，我想获取所点击缩略图的src并使用它来替换{{1}}组件中图片的src 。我无法弄清楚如何在Ember中解决这个问题。

到目前为止，这是我的代码的小提琴：http://jsfiddle.net/81dLb2xc/

以下是我的模板：

large-image

和Javascript：

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

Answer 1

简而言之，您不会进行沟通，但您可以进行沟通。这并不意味着您不能将属性绑定到位于父组件范围内的子组件。一个例子可以解释这一点。

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

模板

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

Ember：将动作从一个组件发送到另一个组件

1 个答案:

的Javascript

模板