lundi 15 juin 2015

emberjs action context is bound to the child component view instead of the component

I'm trying to pass an action up from a child component with sendAction. My action executes on the parent component as expected, however, this refers to the context of the child's view object instead.

See below for the components and component templates:

Parent component Template

// templates/components/parent.hbs  
<div class="parent">

    {{child name="Stewie" select="selectChild"}}
    {{child name="Molly" select="selectChild"}}

</div>
{{yield}}

Child component Template

// templates/components/child.hbs    
<div class="child" {{action "handleAction" on="click"}}>

  name: {{name}}

</div>
{{yield}}

Child component

  // components/child.js  
  import Ember from 'ember';

    export default Ember.Component.extend({
      selected: false,

      actions: {
        handleAction: function() {
          this.set('selected', !this.get('selected'));

          this.sendAction('select', this);
        }
      }
    });

Parent component

  // components/parent.js
  import Ember from 'ember';

  export default Ember.Component.extend({

    selectedChildren: [],

    actions: {

      selectChild: function(child) {
             // oops! this is bound to the child's view isntead of this parent component

        var selectedChildren = this.get('selectedChildren');
          // undefined

        selectedChildren.pushObject(child);
        // oops! cannot call pushObject of undefined
      }
    }
  });

Any suggestions?

Aucun commentaire:

Enregistrer un commentaire