hanldebars 템플릿 로직좀 설명해주실수 있나요? 이해가 안가는 부분이 있어서요..


(discourse_help) #1

discourse 오픈소스 일부분입니다.

posts=postsToRender 이렇게되어있는부분들이 각 view 모듈로 보여주던데…
어떻게 찾아가는지 모르겠네요…

{{conditional-loading-spinner condition=model.postStream.loadingAbove}}
          {{plugin-outlet name="topic-above-posts" args=(hash model=model)}}
          {{#unless model.postStream.loadingFilter}}
            {{scrolling-post-stream
              posts=postsToRender
              canCreatePost=model.details.can_create_post
              multiSelect=multiSelect
              selectedPostsCount=selectedPostsCount
              selectedQuery=selectedQuery
              gaps=model.postStream.gaps
              showFlags=(action "showPostFlags")
              editPost=(action "editPost")
              showHistory=(route-action "showHistory")
              showLogin=(route-action "showLogin")
              showRawEmail=(route-action "showRawEmail")
              deletePost=(action "deletePost")
              recoverPost=(action "recoverPost")
              expandHidden=(action "expandHidden")
              newTopicAction=(action "replyAsNewTopic")
              toggleBookmark=(action "toggleBookmark")
              togglePostType=(action "togglePostType")
              rebakePost=(action "rebakePost")
              changePostOwner=(action "changePostOwner")
              grantBadge=(action "grantBadge")
              addNotice=(action "addNotice")
              removeNotice=(action "removeNotice")
              lockPost=(action "lockPost")
              unlockPost=(action "unlockPost")
              unhidePost=(action "unhidePost")
              replyToPost=(action "replyToPost")
              toggleWiki=(action "toggleWiki")
              toggleSummary=(action "toggleSummary")
              removeAllowedUser=(action "removeAllowedUser")
              removeAllowedGroup=(action "removeAllowedGroup")
              topVisibleChanged=(action "topVisibleChanged")
              currentPostChanged=(action "currentPostChanged")
              currentPostScrolled=(action "currentPostScrolled")
              bottomVisibleChanged=(action "bottomVisibleChanged")
              togglePostSelection=(action "togglePostSelection")
              selectReplies=(action "selectReplies")
              selectBelow=(action "selectBelow")
              fillGapBefore=(action "fillGapBefore")
              fillGapAfter=(action "fillGapAfter")
              showInvite=(route-action "showInvite")}}
          {{/unless}}

          {{conditional-loading-spinner condition=model.postStream.loadingBelow}}
        </div>

(Joonseok Hu) #2

handlebars에는 helper 라는 개념이 있습니다. 템플릿에서 사용가능한 함수 비슷한거라고 생각하시면 됩니다.
inline helper와 block helper로 나뉘며

inline helper는 쓰신 코드의 첫째줄과 같은 형태입니다. 띄어쓰기로 구분했을때, 첫번째 문자열인 plugin-outlet은 헬퍼이름이고, 나머지부분은 함수 인자로 name과 args를 받는다는 뜻입니다.
inline helper는 리턴값이 문자열이고, 따옴표처리, 꺽쇠괄호 처리와 같은 XSS관련 체크사항만 통과되면 그 문자열이 바로 html이 됩니다.

쓰신 코드의 두번째줄에서 '#'으로 시작하는부분은 block helper 라고 하고, block helper는 열과 닫는 맥락이 있습니다. 마지막쯤에 /으로 되어있는 부분이 닫는 코드입니다.
보통 블록헬퍼로는 if문이나 for/foreach 문 등을 만듭니다. 즉 블록헬퍼 그 자체는 html용 문자를 리턴하지 않고, 자신의 코드블록 사이에 들어가는 코드가 실행될지 여부를 결정하거나, 자신의 코드블록에서 사용할수 있는 this를 변형하거나, 등의 식으로 사용합니다.)

자세하게 저게 무슨 일을 하는지는 헬퍼를 등록하는 코드를 보아야 합니다.

Handlebars.registerHelper 라는 함수로 헬퍼를 등록합니다. (단 객체이름은 무슨이름으로 Handlebar 모듈을 require하느냐에 따라 달라질수 있습니다)

https://handlebarsjs.com/
여기서 Helpers라는 제목으로 된 섹션과, Block Expression 이라는 부분 참고하시면 좋을것 같습니다

제일 쉽게 해당 부분 찾으려면 프로젝트 폴더 전체검색으로 " .registerHelper( " 하시면 좋을것같습니다


(discourse_help) #3

감사합니다.
Handlebars.registerHelper 검색해보니 아래 소스가 나오네요…

export function registerUnbound(name, fn) {
const func = function(…args) {
const options = args.pop();
const properties = args;

for (let i = 0; i < properties.length; i++) {
  if (
    options.types &&
    (options.types[i] === "ID" || options.types[i] === "PathExpression")
  ) {
    properties[i] = get(this, properties[i], options);
  }
}

return fn.call(this, ...properties, resolveParams(this, options));

};

_helpers[name] = Ember.Helper.extend({
compute: (params, args) => fn(…params, args)
});
Handlebars.registerHelper(name, func);
}

첫번째와 두번째줄은 약간 이해가 갔는데…
세번째줄은 뭘의미하는건지 모르겠네요 search 해보니 함수이름이긴하던데…

{{scrolling-post-stream
posts=postsToRender
canCreatePost=model.details.can_create_post

import { rawConnectorsFor } from “discourse/lib/plugin-connectors”;