handlebar js if 条件语句检查 json 对象值

Question

我有处理 handlebars js 中的 if 条件的问题

{"lstModel":[{"name":"Sizes","values":[{"value":"L"},{"value":"XL"},{"value":"M"}]},{"name":"Colours","values":[{"value":"Green"}]}]}


     <script type="text/x-handlebars-template" id="filter">
        <form class="col-md-6" id="filter-{{name}}">
                                <label>Select {{name}}</label>
                            {{#if name.Sizes}}
                                <div class="size-selector">
                                {{#values}}
                                    <div class="entry">{{value}}</div>
                                {{/values}}
                                </div>
                           {{else if name.Colours}}
                                <div class="color-selector">
                                {{#values}}
                                    <div class="entry" data-value={{value}} style="background: {{value}};">&nbsp;</div>
                                {{/values}}
                                </div>
                            {{/if}}
</form></script>

我面临的问题是，当我试图检查 json 的值时，如果条件未显示进入条件。请帮忙

Answer 1

您的模板应该像下面这样重写，以使条件和循环正常工作

<script type="text/x-handlebars-template" id="filter">
  {{#each lstModel}}
    <form class="col-md-6" id="filter-{{name}}">
      <label>Select {{name}}</label>
      {{#ifCond name 'Sizes'}}
        <div class="size-selector">
          {{#each values}}
            <div class="entry">{{value}}</div>
          {{/each}}
        </div>
      {{else}} 
        {{#ifCond name 'Colours'}}
          <div class="color-selector">
            {{#each values}}
              <div class="entry" data-value={{value}} style="background: {{value}};">&nbsp;</div>
            {{/each}}
          </div>
        {{/ifCond}}
      {{/ifCond}}
    </form>
  {{/each}}
</script>

并且您需要注册自定义 'handlebars helper' ifCond 以匹配特定字符串。

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

最后，输出（已编译 HTML）将如下所示，

<script type="text/x-handlebars-template" id="filter">
  <form class="col-md-6" id="filter-Sizes">
    <label>Select Sizes</label>
      <div class="size-selector">
          <div class="entry">L</div>
          <div class="entry">XL</div>
          <div class="entry">M</div>
      </div>
  </form>
  <form class="col-md-6" id="filter-Colours">
    <label>Select Colours</label>
        <div class="color-selector">
            <div class="entry" data-value=Green style="background: Green;">&nbsp;</div>
        </div>
  </form>
</script>

希望对您有所帮助。

handlebar js if 条件语句检查 json 对象值

handlebar js if condition statement check with json object value

json

if-statement

parameter-passing

templatebinding

handlebars.js