lundi 30 mars 2020

Ember passing an action closure through an outlet

I am building a simple Ember app, but I have run into difficulty passing an action closure to a child component when that component is rendered in the of a navigable container.

For context, here is a quick look at the aesthetically-astonishing app I have been building:

I have a roles/role path that displays a component (the yellow section above) with the following markup. Note that the model for this component is an instance of a Role:

// file: app/components/role.hbs

<p></p>

<div>
  
  <div class='route-content'></div>
</div>

(Where "sel" stands for "someone else's library".)

Into that outlet will be rendered the appropriate list component, either users or privileges.

The users list is rendered by the following component. Note that the model is the list of User instances associated with the Role from its parent:

// file: app/components/role/user-list.hbs

<ul>
  
    <li></li>
  
</ul>

and when the button is clicked it calls an action defined in the RoleUserListComponent class:

// file: app/components/role/user-list.js

import Component from '@glimmer/component';
import { action } from "@ember/object";

export default class RoleUserListComponent extends Component {

  @action removeUser(user) {
     // remove the user model from the role... but which role?
  }
}

The catch is that the relationship between users and roles is many-to-many, so I can't simply unset the user's owner and let Ember Data take care of things. The obvious answer seemed like passing an action closure from the role component to its child user-list component.

Except, there seems to be no way to pass the action closure through the . What I was hoping for was something like:


which would pass the closure to any component that was rendered there. I tried instead to use in the child to let the parent render the delete button and give it the appropriate action, but that also hit the outlet wall.

I also tried to use controllers, which aren't documented that well, probably since their role seems to have been evolving dramatically over Ember's maturation. But while this brief explanation does mention passing down actions, it doesn't go into details, and the few up-to-date examples I found all seem to break when an outlet joins the party.

I'm suspecting that just plain isn't closure-friendly.

While defining a service would probably work, that doesn't seem to be what services are intended for, and I'd be cluttering up my global space to solve a local problem.

What is the best practice (or, really, any practice) for dealing with getting messages through outlets? I looked for ways to query the earlier parts of the path, but I didn't find any that were defined in the relevant classes.




Aucun commentaire:

Enregistrer un commentaire