Handlebars，if else-if自定义辅助对象

Handlebars, if else if custom helper

本文关键字：对象 自定义 else-if if Handlebars      更新时间：2023-09-26

我在弄清楚如何构建车把助手时遇到了问题。我有一个特殊的情况，我得到了一个5个不同符号的列表，我需要将它们应用于一个元素。

列表如下：

  1. 自定义标志
  2. 已售出
  3. 开放日
  4. 新建
  5. 新价格

我已经用这个块解决了它，但每次看到它并想把它移到一个助手中来清理标记时，我都会感到非常尴尬。

            <div class="case-image" data-img-src="{{image_url}}">
              {{#if sign_url }}
                <div class="case-sign">{{sign_url}}</div>
              {{else}}
                {{#if solgt}}
                <div class="case-sign">Solgt</div>
                {{else}}
                  {{#if aabenthus}}
                  <div class="case-sign">Åbent hus</div>
                  {{else}}
                    {{#if nyhed}}
                    <div class="case-sign">Nyhed</div>
                    {{else}}
                      {{#if ny_pris}}
                      <div class="case-sign">Ny pris</div>
                      {{/if}}
                    {{/if}}
                  {{/if}}
                {{/if}}
              {{/if}}
              <a href="{{page_url}}"></a>
            </div>

我猜您希望使用"枚举"类型，而不是为每个类型使用5个单独的标志。如果类型为Custom Sign，则使用customValue。否则，将返回该类型的预定字符串。

Handlebars文件

<div class="case-image" data-img-src="{{image_url}}">
   <div class="case-sign">{{sign type customValue}}</div>
       <a href="{{page_url}}"></a>
   </div>
</div>

浏览器内JS:

// Enumeration for type of house
var Types = {
  'Custom Sign': 1,
  'Sold': 2,
  'Open house': 3,
  'New': 4,
  'New price': 5
};
Handlebars.registerHelper('sign', function(type, customValue) {
    var ret = '';
    if (type === Types['Custom Sign']) {
      ret = customValue || '';
    } else if (type === Types['Sold']) {
      ret = 'Solgt';
    } else if (type === Types['Open house']) {
      ret = 'Åbent hus'
    } else if (type === Types['New']) {
      ret = 'Nyhed';
    } else if (type === Types['New house']) {
      ret = 'Ny pris'; 
    }
    return ret;
});

如果您使用的是express，请通过这种方式使用助手设置视图引擎

var exphbs = require('express-handlebars');
var hbs = exphbs.create({
  helpers: {
     sign: function(type, customValue) {
       // same implementation as above
     }
  },
  extname: '.hbs', // optional - edit as desired
  layoutsDir: './views/', // optional - edit as desired
  defaultLayout: 'layout' // optional - edit as desired
});
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
相关文章：