I noticied that few plugin outlet like topic-list-after-title require raw.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.
sam
2월 3, 2020, 1:06오전
3
Raw 템플릿은 성능 최적화 기법입니다. Ember 뷰 기능 중 일부만 존재하며, 기능이 제거된 것이 더 빠른 성능의 원인입니다.
따라서 확장성을 위해 여기서는 다른 패턴을 사용합니다. 전체 Ember 라이프사이클을 지원하지 않습니다.
저도 같은 질문을 가지고 있습니다.
테마 컴포넌트 내에서 일반 컴포넌트처럼 원시 템플릿을 해당 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 버전이 모두 존재하는 경우가 여러 곳인 것 같습니다.
아, 적어도 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 파일이 없다는 것을 시사합니다.
네, 저도 그렇게 생각합니다. 다른 방법이 있다면 아직 보지 못했네요!
Ember를 계속 업그레이드하면서 옵저버(Observer) 사용을 줄이려는 중이므로, 이 옵저버는 이상적이지 않습니다. 더 나은 방법은 헬퍼를 만들어 그 안에 JS를 넣는 것입니다. 아래는 예시입니다.https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr
export function categoryExpertTopicListIndicators(context) {
let html = "";
html += addApprovedPills(context.topic, context.siteSettings);
html += addNeedsApprovalPill(
context.topic,
context.currentUser,
context.siteSettings
);
html += addIsQuestionPill(
context.topic,
context.currentUser,
context.siteSettings
);
return htmlSafe(html);
}
최근 작업에서 일부 템플릿 '트리’가 클로저 액션을 통해 리프 템플릿에서 데이터를 위로 전달할 수 있도록 해야 했는데, 이를 위해 일부 hbr을 hbs로 변경했습니다.
이 작업은 실험적이며 성능에 영향을 미칠 것임을 잘 알고 있습니다. 하지만 설계를 여러 번 반복해 보았음에도 불구하고, ‘프레임워크 내부’ 방식을 유지하면서 이를 구현할 대안을 찾지 못했습니다.
헬퍼 함수에 함수를 전달해서 거기서 호출할 수 없나요? 아직 시도해 본 적은 없지만, 가능할 것 같아요.
구체적으로, 리프 컴포넌트에서 이미지의 속성을 결정하고, 이를 조부모 컴포넌트의 속성으로 저장하여 현재 리스트 렌더링 이후에도 유지되어야 하는 스타일링에 영향을 주고자 합니다. 데이터는 반드시 위로 전달되어야 합니다. 만약 현재 접근 방식으로 막혀 있다면 헬퍼 함수로 이를 달성할 수 있다면 좋은 옵션이 될 것 같습니다. 감사합니다!
