Action bubbling in Ember

问题

I am relatively new to Ember so forgive me if the answer to this question is obvious. I started a new job recently and I thought their approach to action bubbling was...curious.

This is a big application with a lot of deeply nested components. To bubble actions up to the controller, they have been using this sort of thing a lot:

actionName (parameter) {
    this.attrs.actionName(parameter);
},

This will then bubble one level up to the next component, where they will call the same action again. This will continue in such a way until it reaches the controller where the action is defined.

I am not a fan of this for various reasons, but mostly because it makes writing any new actions a chore.

My question is a two-parter:

1) For deeply nested components, is there a better solution?

2) I have seen sendAction before, but have not used it in practice. What is the difference between this.attrs.actionName(parameter);?

Thank you!

回答1:

For deeply nested components, is there a better solution?

The short answer is no. Ember components force you to explicitly bubble actions. The consumer must also explicitly "subscribe" to an action to receive it. These design decisions were made so that code is as explicit as possible to avoid unintended errors. (Imagine if events automatically bubbled and a component added a new event. Those events would automatically bubble, go uncaught, then cause an error.)

I have seen sendAction before, but have not used it in practice. What is the difference between this.attrs.actionName(parameter);?

sendAction is the old way of doing things (pre 2.0). In Ember 2.0 actions are placed in the attrs object instead. There's a few benefits to this approach, but the biggest one is readability. You should prefer the new method going forward, especially since the new method allows actions to return values to the caller (something that sendAction doesn't allow).

To make a really long story somewhat shorter: it seems very verbose, but it's just the way Ember does things. More often than not, it's much better than the alternatives.

回答2:

This is from my recent experience (and headaches); Like GJK said

sendAction is the old way of doing things (pre 2.0).

so this is a no-no.

Provided you specify an action into your base controller you can do this:

pass the action through an attribute up to the component

//example/template.hbs

{{component "inner-component" ... innerClick=(action "outerClick" 42)}}

use the action

//inner-component/template.hbs

<button {{action this.attrs.innerClick}}> Go! </button>

without touching the .js files.

If you are using routes you have to do an additional step to ensure your controller has the actions to call:

    //example/route.js

    setupController( controller, model ) {

        Ember.set( controller, 'actions', {

            outerClick: function( value ) {

                console.log( 'Action received!', value )
            }
        } )
    },

来源：https://stackoverflow.com/questions/32975385/action-bubbling-in-ember

标签

ember.js