获取 Glimmer 组件访问父级的内容

开发
1

我正在向 before-topic-list-body 添加一个组件。我需要它从类别或主题中获取一些数据（我会将我想要的数据添加到任何一个更合适的序列化器中）。

我已经花了几个小时研究这个问题，但我感到很迷茫，很有可能这是一个 2-5 分钟就能解决的问题，只需要给我一个提示。

我隐约记得以前想过或听到过关于这个问题的说法，但我卡住了。

2 个赞
2

:thinking: 嗯……

也许这个话题中有可以提供帮助的内容？

3

谢谢，@Lilly！不是个坏主意，但我担心 currentUser 是应用于整个页面，而不仅仅是组件插入的位置，而且我认为我是对的。为了看看有什么可用的，我搜索了官方插件，得到了这个服务列表（如果我聪明的话，我会知道如何在 discourse 源代码中找到它们，但我不是）：

  @service adminPluginNavManager;
  @service appEvents;
  @service capabilities;
  @service chatApi;
  @service composer;
      @service currentUser;
  @service currentUser;
  @service dialog;
  @service dTemplatesModal;
  @service encryptWidgetStore;
  @service hCaptchaService;
  @service imageCaptionPopup;
  @service menu;
  @service messageBus;
  @service modal;
  @service moreTopicsPreferenceTracking;
  @service presence;
  @service quickSearch;
  @service router;
  @service search;
  @service searchPreferencesManager;
  @service session;
  @service site;
  @service siteSettings;
  @service store;
  @service taskActions;
  @service toasts;
  @service upgradeStore;
  @service userFieldValidations;
  @service whosOnline;
2 个赞
4

我找到了。这是我从上下文中获取它的位置：

<RatingOne @scaleValue={{this.scaleValue}} @topic={{this.parentView._parentView.topic}} />

因此，我可以使用 parentView 和 _parentView 来追溯到 topic！这就是我想要的魔法（我认为这也能解决另一个项目上的另一个问题）。现在我只需要把东西放到 topic controller 中，这希望都是我（至少大部分）知道如何做的事情！

1 个赞
5

这是否在控制台打印了弃用消息？应该打印的，因为我们即将移除 PluginOutlet 的 parentView 访问权限。事实上，它非常不被推荐，以至于应该在 UI 中向管理员显示一个警告横幅 :sweat_smile:

如果您没有看到任何警告，请告知我们！

（parentView 是 Ember 的经典组件系统的一部分，我们正在逐步淘汰它）

如果您想访问树中更高级别的信息，那么它要么需要作为参数传递给 Plugin Outlet，要么您需要使用可用的服务之一（例如 currentUser 或 router）

2 个赞
6

啊，我明白了。你使用的是 ._parentView，而不是 .parentView。带下划线的版本可以让你绕过弃用消息。但即便如此，它在未来几周内也会停止工作。

此 PR 可防止此类解决方法，因此 .parentView 和 ._parentView 都将引发弃用警告：

2 个赞
7

谢谢，@david！

没有。即使我找了一会儿也没有。我使用的是 27eea3250cbde2e8bca754f445bee403c059eba3

<RatingOne @scaleValue={{this.scaleValue}} @topic={{this.parentView._parentView.topic}} />

<td class="rating-one">
  <span class="rating-title">{{this.ratingName}}</span>
  这是主题 {{this.topic.id}}
  这是类别 {{this.topic.category.title}} (类别 ID: {{this.topic.category_id}})
  {{log "rating this" this}}
  {{log "scale value" this.scaleValue}}
  {{log "rating value" this.ratingValue}}
  {{log "category" this.topic.category_id}}
    <form>
        {{!-- {{this.ratingLow}} --}}
       {{#each this.ratingOptions as |option|}}
            <input type="radio" name="rating" value={{option.value}} checked={{if (eq option.value this.ratingValue) "checked"}}> <span class="rotated-label">{{option.label}}</span>
        {{/each}}
        {{!-- {{this.ratingHigh}} --}}
    </form>
</td>

啊。好的。那么我能使用 router 来访问主题或类别吗？我（认为我）需要做的是将这些 ratingOptions 放入主题或类别序列化器中，这样我就可以将这些多个主题评分添加到主题列表中，以便可以对这些内容进行评分而无需进入主题（表面上人们已经熟悉它们了，所以他们不需要进入主题就知道他们在投票什么）。

嗯。看起来不行。

2 个赞
8

好的，这次提交应该可以解决这个问题。你能确认现在看到警告了吗？

理想情况下，这些东西应该作为参数在插件出口处提供。

你上面提到了“before-topic-list-body”。它有所有这些参数：

2 个赞
9 
{{log "rating this parent" this.parentView._parentView.topic}}

会产生一个丑陋的错误。

<RatingOne @scaleValue={{this.scaleValue}} @passedRouter={{this.router}} @topic={{this.parentView}} />

似乎不会产生错误。

我真的需要 above-topic-list-item，但感谢你精彩的例子，我发现它应该在 outletArgs 中包含主题，

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/topic-list-item.gjs#L284

哈！我要成功了！

所以 outletArgs 意味着它现在在那个东西的 this 中了吗？（看起来是这样——我以为我需要以某种方式在 args 中查找……）

所以，在我的连接器 hbs 中，我可以访问 this.topic，然后像这样调用我的组件：

<RatingOne @name="one" @topic={{this.topic}} />

然后在 RatingOne 组件的 hbs 中（有一天会重命名为 rating，因为我已经弄清楚如何传递东西给它了），我可以

  这是主题 {{this.topic.id}} {{this.topic.title}}
  这是分类 ID： {{this.topic.category_id}})

并获取主题信息！

现在我看到主题了，现在我可以去添加我的参数到主题序列化器，对吗？（也许最好只传递给分类……或者也许我只会传递一个“doTheThing”值到序列化器，并从 SiteSettings 获取实际的东西，因为我认为他们想要这个在站点而不是分类级别）。

除非我以某种方式偶然发现了其他已弃用的东西，否则似乎你已经完成了。非常感谢。 :beer: :beers: :clinking_glasses: :moneybag:

3 个赞
10

这与“我如何在 Glimmer 中实现功能有关，所以我将它保留在这里。”

我需要在每个主题渲染后调用此代码，以重新排序 <td> 项。我使用了 above-topic-item，它将评分放在主题标题之前。这个粗糙的 hack 在一些 javascript 的帮助下重新排序了 <td> 项。

// document.addEventListener("DOMContentLoaded", function() {
//   const table = document.querySelector('table.topic-list.ember-view');
//   const rows = table.getElementsByTagName('tr');

//   // todo: this needs to get called on page load
//   for (let row of rows) {
//     const cells = Array.from(row.getElementsByTagName('td'));
//     cells.sort((a, b) => {
//       const orderA = parseInt(window.getComputedStyle(a).order, 10);
//       const orderB = parseInt(window.getComputedStyle(b).order, 10);
//       return orderA - orderB;    });

//     for (let cell of cells) {
//       row.appendChild(cell);
//     }
//   }
// });

我认为我“只需要”调用某个 afterRender 或其他东西，而不是我现有的文档级别的东西。也许是路由器？

2 个赞
11

我不得不怀疑，杰，你最后一个问题是否启发了： Upcoming topic-list changes - how to prepare themes and plugins :thinking: ;）

而且我相信你最后一个问题的答案最终是，“查看新的API！ :rocket:”

3 个赞
12

真有趣。而那个想要这项工作的人（这项工作需要这个）刚刚重新出现。也许现在会更直接了！

2 个赞