javascript - 从组件中的 Action 调用 Controller Action

Question

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

index.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}}

当我点击按钮时，它会调用 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 文件，我认为应该在 = 符号左侧调用 Controller 上的操作名称

index.js( Controller )

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

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

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

Answer 1

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

来自

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

给

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