从组件中的操作调用控制器操作答案

【问题标题】：Calling controller action from action in component从组件中的操作调用控制器操作
【发布时间】：2015-08-24 05:04:00
【问题描述】：

我在让它工作时遇到了一些问题。我以为我做得对，但事实并非如此。

index.hbs

{{#if image}}
    {{image-cropper imageToCrop=image setCroppedImage=setCroppedImage}}
    <br>
    {{/if}}
{{file-input action="setImage"}}

file-input 组件接收一张图片，并将 image 属性设置为一个数据 URL，然后显示 image-cropper 组件。

image-cropper.hbs

<div class="cropper-container">
    <img src="{{imageToCrop}}">
</div>
<button {{action 'cropImage'}}>Crop Image</button>
{{croppedImage}}

当我单击按钮时，它会调用 image-cropper.js 文件中的 cropImage 操作

image-cropper.js

actions: {
    cropImage: function() {
        var container = this.$(this.get('cropperContainer'));
        var croppedImage = container.cropper('getCroppedCanvas');
        this.sendAction('setCroppedImage', croppedImage);
    }
}

所以这里我使用this.sendAction();来调用组件上的setCroppedImage动作名称，它引用了index.hbs文件中组件上的动作名称，我认为应该在= 符号左侧的控制器

index.js（控制器）

setCroppedImage: function(croppedImage) {
    console.log('set cropped image called on index controller');
    this.set('finalCroppedImage', croppedImage);
},

但是console.log 语句没有被调用，所以我知道控制器操作也没有被调用。

我需要一些帮助来了解如何让它在这里工作。

【问题讨论】：

标签： javascript ember.js controller components action

【解决方案1】：

经过更多阅读，我发现我需要像这样在动作名称中添加“”

来自

{{image-cropper imageToCrop=image setCroppedImage=setCroppedImage}}

收件人

{{image-cropper imageToCrop=image setCroppedImage="setCroppedImage"}}

【讨论】：