Handlebars.js 다른 경우

클라이언트 측면보기 렌더링을 위해 Handlebars.js를 사용하고 있습니다. Else가 훌륭하게 작동하지만 ELSE IF가 필요한 3 가지 조건부 조건이 발생하면 :

작동하지 않습니다.

{{#if FriendStatus.IsFriend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

핸들 바로 ELSE IF를 수행하려면 어떻게해야합니까?

핸들 바는 {{else if}}3.0.0부터 블록을 지원합니다 .

핸들 바 v3.0.0 이상 :

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

그러나 Handlebars v3.0.0 이전에는 분기 논리를 처리하는 도우미를 정의하거나 중첩 if명령문을 수동으로 정의 해야합니다.

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

나는 보통이 양식을 사용한다 :

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}

핸들 바는 이제 {{else if}}3.0.0부터 지원합니다 . 따라서 코드가 작동합니다.

"조건부"아래에 예제가 있습니다 (여기서 약간 수정 됨 {{else}}:

    {{#if isActive}}
      <img src="star.gif" alt="Active">
    {{else if isInactive}}
      <img src="cry.gif" alt="Inactive">
    {{else}}
      <img src="default.gif" alt="default">
    {{/if}}

http://handlebarsjs.com/block_helpers.html

핸들 바의 정신은 "논리적"이라는 것입니다. 때때로 이것은 우리가 우리와 싸우는 것처럼 느끼게하고 때로는 추악한 중첩 된 if / else 논리로 끝납니다. 당신은 할 수 도우미를 쓰기; 많은 사람들이 "더 나은"조건부 연산자로 핸들 바를 늘리거나 그것이 핵심의 일부라고 생각합니다 . 하지만 이것 대신에

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

이를 위해 모델에 물건을 배치하고 싶을 수도 있습니다.

{{#if is_friend }}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}

{{#if is_not_friend_yet }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}

{{#if will_never_be_my_friend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

이 플래그 중 하나만 사실인지 확인하십시오. 당신이 if/elsif/else당신의 관점에서 이것을 사용한다면 아마도 다른 곳에서도 그것을 사용할 것이므로, 이러한 변수는 불필요한 것이 아닐 수도 있습니다.

마른 상태로 유지하십시오.

이 간단한 도우미를 작성했습니다.

Handlebars.registerHelper('conditions', function (options) {
    var data = this;
    data.__check_conditions = true;
    return options.fn(this);
});


Handlebars.registerHelper('next', function(conditional, options) {
  if(conditional && this.__check_conditions) {
      this.__check_conditions = false;
      return options.fn(this);
  } else {
      return options.inverse(this);
  }
});

핸들 바의 Chain of Responsibility 패턴 과 같습니다.

예:

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

그것은 아니에요 경우 다른 사람 이 당신을 도울 수 있지만 경우에 따라)

내장 헬퍼

#if

if 도우미를 사용하여 조건부로 블록을 렌더링 할 수 있습니다. 인수가 false, undefined, null, "", 0 또는 []를 반환하면 핸들 막대는 블록을 렌더링하지 않습니다.

주형

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

위의 템플릿에 다음 입력을 전달할 때

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}

안녕하세요, MINOR 클래스 이름 만 편집했습니다. 지금까지 iv를 공개했습니다. 나는 도우미에 다중 매개 변수를 전달해야한다고 생각합니다.

server.js

app.engine('handlebars', ViewEngine({
        "helpers":{
                isActive: (val, options)=>{
                    if (val === 3 || val === 0){
                        return options.fn(this)
                    }
                } 
        }
}));

header.handlebars

<ul class="navlist">
          <li   class="navitem navlink {{#isActive 0}}active{{/isActive}}"
                ><a href="#">Home</a></li>
          <li   class="navitem navlink {{#isActive 1}}active{{/isActive}}"
                ><a href="#">Trending</a></li>
          <li   class="navitem navlink {{#isActive 2}}active{{/isActive}}"
                ><a href="#">People</a></li>
          <li   class="navitem navlink {{#isActive 3}}active{{/isActive}}"
                ><a href="#">Mystery</a></li>
          <li class="navitem navbar-search">
            <input type="text" id="navbar-search-input" placeholder="Search...">
            <button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
          </li>
        </ul>