What is the difference between raw.hbs handlerbar files and only .hbs handlerbar files?

开发
1

I noticied that few plugin outlet like topic-list-after-title require raw.hbs file
while other require only hbs file.

I did search in the handlebars documentation, but I could see anything as raw hbs file.

I checked in the discourse code, plugin outlet like topic-list-after-title are defined as

{{raw-plugin-outlet name="topic-list-after-title"}}

while other plugins are defined as

{{plugin-outlet name="composer-fields-below" args=(hash model=model)}}

Q1. Is there any reason why some plugin plugin are defined in above way ( raw-plugin-outlet) ?

Also I noticied that in the raw.hbs file, the setupcomponent is not called as explained in this link

Q2. Is it so? I had also asked similar question regarding this.

2 个赞
2

我也很感兴趣。你找到答案了吗？:grinning:

3

原始模板是一种性能优化。它仅支持部分 Ember 视图功能，正是这些功能的移除使其运行更快。

因此，我们在此采用不同的模式以实现可扩展性。我们并不具备完整的 Ember 生命周期。

3 个赞
4

对于原始插槽（raw outlets），是否也有类似 setupComponent(args, component) 的方法？那计算属性呢？我想根据上下文中的数据做一些计算。我该如何实现？我甚至不确定我配套的 .js.es6 文件命名是否正确。我应该将其命名为 .raw.js.es6 吗？

好的，我找到解决方案了：重新打开 Topic 模型并在其中创建一个计算属性：

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/initializers/event-edits.js.es6#L74

之后，它就可以在原始模板中使用了：

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/connectors/topic-list-after-title/topic-list-event-rsvp.raw.hbs#L5

1 个赞
5

我有同样的问题。

是否可以在主题组件内，像常规组件一样，为原始模板提供相应的 JavaScript？

我有一个相当具有挑战性的用例，需要从主题列表中深度嵌入的模板向组件链向上传递参数以管理操作。

我注意到 Discourse 源代码中有几个 .hbr 文件，似乎有对应的 JavaScript 组件元素，但发现了一些奇怪的现象，例如：

merefield@development:~/discourse$ find . -type f -name "flat-button.*"
./app/assets/javascripts/discourse/app/templates/flat-button.hbr
./app/assets/javascripts/discourse/app/templates/components/flat-button.hbs
./app/assets/javascripts/discourse/app/components/flat-button.js
merefield@development:~/discourse$ find . -type f -name "topic-list-item.*"
./app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr
./app/assets/javascripts/discourse/app/templates/components/topic-list-item.hbs
./app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
./app/assets/javascripts/discourse/app/components/topic-list-item.js
merefield@development:~/discourse$ find . -type f -name "topic-post-badges.*"
./app/assets/javascripts/discourse/app/templates/components/topic-post-badges.hbs
./app/assets/javascripts/discourse/app/templates/topic-post-badges.hbr
./app/assets/javascripts/discourse/app/components/topic-post-badges.js

因此，似乎存在多个实例，其中特定组件同时拥有 .hbr 和 .hbs 两种格式？

6

啊，至少在使用 topic-list-item 时，我看到切换是在这里进行的：

hbs 文件内容：

{{topicListItemContents}}

对应的 JavaScript 代码：

  @observes("topic.pinned")
  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set(
        "topicListItemContents",
        template(this, RUNTIME_OPTIONS).htmlSafe()
      );
      schedule("afterRender", () => {
        if (this.selected && this.selected.includes(this.topic)) {
          this.element.querySelector("input.bulk-select").checked = true;
        }
      });
    }
  },

真狡猾！

所以这表明 .hbr 文件没有底层的 JavaScript 文件，除非通过这类变通方法支持？

1 个赞
7

是的，我认为是这样。如果有其他方法，我还没见过！

1 个赞
8

那个观察者并不理想，因为我们正在努力摆脱它们，同时继续升级 Ember。我认为更好的方法是创建一个辅助函数，并将您的 JS 代码放在其中。这是一个示例：
https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr

2 个赞
9

在最近的一些工作中，我需要让部分模板“树”能够通过闭包操作从叶子模板向上通信数据，因此我将一些 hbr 文件切换为 hbs 文件以支持此功能。

这项工作尚处于实验阶段，我理解这会对性能产生影响，但在多次迭代设计后，我未能找到一种在保持“框架内”的前提下实现此功能的替代方案。

10

您不能将函数传递给辅助函数并在其中调用它们吗？我想我还没有尝试过，但我觉得应该可以这样做。

1 个赞
11

具体来说，我正在叶子组件中确定图像的属性，然后将它们存储为祖父组件的属性，以影响必须在当前列表渲染之外持续存在的样式。数据确实需要向上传递。如果辅助函数能够实现这一点，那么在我当前的方法行不通时，这听起来是一个不错的选择，谢谢！

1 个赞