從組件中的動作調用控制器動作

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