主题列表项页脚按钮 - 时间线内容

开发
1

你好！我正在使用 Discourse 开发一个基于“时间线”内容概念的社区。

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

“回复”和“分享”这两个按钮目前仅用于测试。我创建了一个类似 topic-footer-buttons.hbs (#ember) 的组件，并做了一些修改：

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

如果我将此组件插入到 topic-list.hbs 中 topic-list-item 模板的下方，它可以正常工作！但这不利于未来 Discourse 版本的升级或插件的实现。因此，我尝试通过 管理 → 自定义 → 通用 → 页头 (HTML) 来修改 topic-list-item.raw：

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

但出现了另一个问题：我无法在 text/x-handlebars 模板中调用组件。是否有一种方法可以在 topic-list-item.raw 模板内部调用我的页脚按钮组件？例如，是否可以通过某个辅助函数或部件来调用该组件？

我将非常感激您的帮助，以便我能彻底消除这些疑虑。

3 个赞
2

我过去处理这个问题的方法是将按钮封装在一个 HTML 辅助函数中，该函数会在原始模板中渲染原始 HTML，然后你可以通过原始插件出口插入它。示例如下：

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

按钮点击事件在 topic-list-item 组件中处理，例如：

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield 可能也有一些想法 :slight_smile:

此外，你可能应该使用主题的 JavaScript 文件夹结构，而不是将脚本添加到 header.html 中。参见：

4 个赞
3

我注意到最近一次提交到 preview-edits 分支的更改移除了那个点击事件：https://github.com/paviliondev/discourse-topic-previews/commit/6064a5940a80e69ed56a7cbe67f8ded8e33e5d67。目前是否仍有办法让按钮点击事件由 topic-list-item 组件处理？

4

是的，@angus，据我个人看法，这已不再推荐——它曾导致 Ember 出现轻微“心脏骤停”，因此我从 TLP 中移除了该功能。当同时触发两个点击事件时（例如点击本身带有锚点的主题标题），浏览器会执行完整的页面刷新，这显然不是 OPA 所期望的行为。多位用户已报告过此问题。

目前在 TLP 中，你只能点击标题、摘要或缩略图。

你必须确保只存在一个可点击区域，重叠的可点击区域将引发问题。

1 个赞