Xử lý khác nếu khác

Tôi đang sử dụng Handlebars.js để hiển thị chế độ xem phía máy khách. Nếu Else hoạt động tốt nhưng tôi đã gặp điều kiện 3 cách yêu cầu ELSE IF:

Điều này không hoạt động:

{{#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}}

Làm cách nào để làm ELSE IF với tay lái?

Tay lái hỗ trợ {{else if}}các khối kể từ 3.0.0.

Tay lái v3.0.0 trở lên:

{{#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}}

Tuy nhiên, trước Handbars v3.0.0, tuy nhiên, bạn sẽ phải xác định một trình trợ giúp xử lý logic phân nhánh hoặc các ifcâu lệnh lồng theo cách thủ công:

{{#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}}

Tôi thường sử dụng mẫu này:

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

Tay lái hiện hỗ trợ {{else if}}kể từ 3.0.0. Do đó, mã của bạn bây giờ sẽ hoạt động.

Bạn có thể xem một ví dụ trong "điều kiện" (sửa đổi một chút ở đây với một bổ sung {{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

Tinh thần của tay lái là "không logic". Đôi khi điều này làm cho chúng ta cảm thấy như chúng ta đang chiến đấu với nó, và đôi khi chúng ta kết thúc với logic if / other lồng nhau xấu xí. Bạn có thể viết một người trợ giúp; nhiều người gia tăng tay lái với toán tử có điều kiện "tốt hơn" hoặc tin rằng nó phải là một phần của lõi . Tôi nghĩ, mặc dù, thay vì điều này,

{{#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}}

bạn có thể muốn sắp xếp mọi thứ trong mô hình của mình để bạn có thể có thứ này,

{{#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}}

Chỉ cần chắc chắn rằng chỉ có một trong những lá cờ này là đúng. Rất có thể, nếu bạn đang sử dụng điều này if/elsif/elsetrong quan điểm của mình, có lẽ bạn cũng đang sử dụng nó ở một nơi khác, vì vậy những biến này có thể không phải là thừa.

Giữ nó nạc.

Tôi đã viết người trợ giúp đơn giản này:

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);
  }
});

Đó là một cái gì đó giống như mô hình Chuỗi trách nhiệm trong Tay lái

Thí dụ:

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

Nó không phải là một cái khác nếu nhưng trong một số trường hợp nó có thể giúp bạn)

Trợ giúp tích hợp

#if

Bạn có thể sử dụng if helper để tạo điều kiện một khối. Nếu đối số của nó trả về false, không xác định, null, "", 0 hoặc [], Tay lái sẽ không hiển thị khối.

bản mẫu

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

Khi bạn chuyển đầu vào sau vào mẫu trên

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

Xin chào, tôi chỉ có một chỉnh sửa tên lớp MINOR, và cho đến nay đây là cách iv tiết lộ nó. tôi nghĩ rằng tôi cần phải truyền các tham số đa biến cho người trợ giúp,

server.js

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

tiêu đề.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>