Question

我在解决这个问题时遇到了一些问题。我以为我做得对，但似乎并非如此。

index.hbs

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

文件输入组件将图像输入，并将图像属性设置为数据URL，然后显示图像裁剪器组件。

图片-cropper.hbs

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

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

图片-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

经过更多阅读后，我发现我需要添加＆＃34;＆＃34;像这样的动作名称

发件人

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

要

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

从组件

1 个答案: