从组件中调用控制器动作

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文件中组件上的动作名称，我认为应该调用左侧控制器上的动作名称，在等号=的左侧。

index.js（控制器）

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

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

我需要一些帮助理解如何在这里使其工作。

- Jordan

Answer 1

在更多阅读后，我发现需要像这样在操作名称中添加""。 原文：

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

到

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

- Jordan