Ember 通過出口傳遞動作閉包

Question

我正在構建一個簡單的 Ember 應用程序，但是當該組件在可導航容器的{{outlet}}中呈現時，我遇到了將動作閉包傳遞給子組件的困難。

對於上下文，這里是我一直在構建的美學驚人的應用程序的快速瀏覽：

我有一個roles/role路徑，它顯示帶有以下標記的組件（上面的黃色部分）。 請注意，此組件的模型是 Role 的一個實例：

// file: app/components/role.hbs

<p>{{@role.name}}</p>

<div>
  {{sel-nav-tabs items=this.tabConfig}}
  <div class='route-content'>{{outlet}}</div>
</div>

（其中“sel”代表“其他人的圖書館”。）

this.tabConfig 在對應的類中定義：

// file: app/components.role.js

import Component from '@glimmer/component';

export default class RoleComponent extends Component {

  get tabConfig() {

    return [
      { label: 'Users', route: 'roles.role.users' },
      { label: 'Privileges', route: 'roles.role.privileges' },
    ];

  }

}

進入 role.hbs 中的 outlet 將呈現適當的列表組件， users或privileges 。

用戶列表由以下組件呈現。 請注意，模型是與其父級角色關聯的 User 實例列表：

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

<ul>
  {{#each @users as |user|}}
    <li>
      {{user.name}}
      {{#sel-button type="toolbar" onActivate=this.removeUser}}
        {{sel-icon/remove-circle}}
      {{/sel-button}}
    </li>
  {{/each}}
</ul>

當按鈕被點擊時，它會調用 RoleUserListComponent 類中定義的一個動作：

// 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?
  }
}

問題是用戶和角色之間的關系是多對多的，所以我不能簡單地取消設置用戶的所有者並讓 Ember Data 來處理事情。 顯而易見的答案似乎是將一個動作閉包從角色組件傳遞給它的子用戶列表組件。

除了，似乎沒有辦法通過{{outlet}}傳遞動作閉包。 我希望的是這樣的：

{{outlet onActivate=(action removeUser @role)}}

這會將閉包傳遞給在那里呈現的任何組件。 我嘗試在孩子中使用{{yield user}}來讓父級呈現刪除按鈕並為其提供適當的操作，但這也擊中了出口牆。

我還嘗試使用控制器，但這些控制器沒有被很好地記錄下來，可能是因為它們的角色似乎隨着 Ember 的成熟而發生了巨大的變化。 但是，雖然這個簡短的解釋確實提到了傳遞動作，但它沒有詳細說明，而且我發現的少數最新示例似乎都在出口加入聚會時中斷了。

我懷疑{{outlet}}只是簡單的不是閉包友好的。

雖然定義服務可能會奏效，但這似乎不是服務的目的，而且我會弄亂我的全局空間來解決本地問題。

處理通過網點獲取消息的最佳實踐（或實際上，任何實踐）是什么？ 我尋找了查詢路徑早期部分的方法，但沒有找到相關類中定義的任何方法。

編輯以添加更多細節：

/roles/role的路由模板很簡單：

// file app/templates/roles/role

{{role role=@model}}

Role 組件在上面的第一個列表中。 （我還在上面添加了 role.js 文件內容。）我這樣做的原因是，通過制作一個組件，我創建了一個邏輯位置來放置配置（而不是內聯輔助函數），它只是給了我一種整潔的感覺讓所有 ui 元素都在組件中。

但是，如果重構可以成為一個好的解決方案的錨點（本質上是將整個 Role 組件復制到路由模板中），那么我會很樂意這樣做。

Answer 1

{{outlet}}僅支持命名插座的一個可選字符串參數，不支持其他任何參數，因此您將無法通過使用{{outlet}}來實現這一點！