从组件中的动作调用控制器动作

Question

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

索引.hbs

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

文件输入组件接收一个图像，并将图像属性设置为数据 URL，然后导致图像裁剪组件显示。

image-cropper.hbs

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

当我按一下按钮，它调用cropImage在图像cropper.js文件操作

图像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语句，所以我知道也没有调用控制器操作。

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

Answer 1

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

从

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

到

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