Accessing "this" as the parent from callbacks emberjs nested component

Question

I have a parent component whose template contains a dropzone component from https://www.npmjs.com/ember-cli-dropzonejs:

{{drop-zone url='#' addRemoveLinks=true success=fileReceived}}

In the parent controller, I have a method called fileReceived which is being called when the success event triggers on the dropzone. However, I would like to call other methods which are stored on the controller when the fileReceived method is called but I cannot access this. I tried setting an instance variable called self to this on didInsertElement, but it gives me window instead of my component.

This is my parent component controller:

import Ember from 'ember'; export default Ember.Component.extend({ self:null, didInsertElement:function() { this.set('self', this); }, fileReceived: function (file) { //Validate sheet this.sendAction('doStuff', file); //"this" returns a dropzone object instead of parentObject //this.doStuff(file); }, actions: { doStuff: function (file) { //do stuff with the file } });

Adam Knights · Accepted Answer · 2015-08-10 11:10:31Z

I think fileReceived should be within actions, and then this.sendAction should be this.send. Then I think this will be the thing you want?

import Ember from 'ember'; export default Ember.Component.extend({ actions: { fileReceived: function (file) { //Validate sheet this.send('doStuff', file); //"this" returns a dropzone object instead of parentObject //this.doStuff(file); }, doStuff: function (file) { //do stuff with the file } });

Edit:

As discussed in comments you also needed to change your template to

{{drop-zone url='#' addRemoveLinks=true success=(action 'fileReceived')}}

I did try that and thought that it didn't work. I just tried it again and realised that I need to make my template look like this: {{drop-zone url='#' addRemoveLinks=true success=(action 'fileReceived')}}. Now it is picking up the action and seems to be working.
Was about to suggest trying {{drop-zone url='#' addRemoveLinks=true success="fileReceived"}}, but your syntax above is better for newer Ember

Collectives™ on Stack Overflow

Accessing "this" as the parent from callbacks emberjs nested component

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related