CODEWITHSUNDEEP
ember.js
thecodejack
thecodejack

Reputation: 13379

Ember.Component's sendAction() to view target

sendAction() in an Ember.Component bubbles to controller by default which is expected. But i have 2,3 actions which i rather need to send to corresponding view which is using the component. In templates we set action to view using target=view. Can we do that?.

Update: Currently as a work around I am sending my view object to component which from there calls view.send() to send the action. But i feel this is not correct.

Upvotes: 4

Views: 2370

Answers (2)

morhook
morhook

Reputation: 1209

For latest Ember 2.9 the recommended approach is to pass a closure action to the child component. The property target and parentView are private ones.

Upvotes: 0

elrick
elrick

Reputation: 681

Ok after some thinking I believe i know that you mean. If you have a component and you have a action it will be handled by the component itself. If you want to send a action outside the component you would use sendAction.

Now to target the view of which holds your component since your component is base on a view, you can probably do this.get('parentView') to get the parent view and then chain send('nameOfAction')

So it would be this.get('parentView').send('nameOfAction') from within the component action and it will then trigger the action on the parent view of which the component is embedded.

So in your component you could have:

 App.DemoCompComponent = Ember.Component.extend({
   actions: {
     internalTrigger: function() {
       //just an alert to make sure it fired
       alert('Internal action was caught on component');
       //this should target parent view component is in
       this.get('parentView').send('viewTriggerTest');
    }
  } 
 });

Now lets say you have you component in the index template you could:

The template would be:

   <script type="text/x-handlebars" data-template-name="index">
     <h2>Inside Index Template</h2>
       {{demo-comp}}
   </script>

The Index View Code would be:

 App.IndexView = Ember.View.extend({
   actions: {
     viewTriggerTest: function() {
       alert('View Trigger Test Worked on Index!');
     }
   }
 });

Here is a jsbin http://emberjs.jsbin.com/reyexuko/1/edit

Upvotes: 6

Related Questions