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

我有处理车把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>

{“lstModel”：[{“name”：“size”，“value”：[{“value”：“L”}，{“value”：“XL”}，{“value”：“M”}]}，{“name”：“colors”，“value”：[{“value”：“Green”}]}
选择{{name}}
{{{#if name.size}
{{{#值}}
{{value}}
{{/values}}
{{else if name.colors}
{{{#值}}
{{/values}}
{{/if}

---

我面临的问题是，当我试图在条件中检查json的值时，如果它没有显示在条件中。请提供帮助。

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

<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>

最后，输出（编译的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>

选择大小
L
特大号
M
选择颜色

---

希望这有帮助。

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

<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>

最后，输出（编译的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>

选择大小
L
特大号
M
选择颜色

---

希望这有帮助。

我发现您的代码存在多个问题。1） 您需要使用{{#each}}帮助器循环遍历数组

lstModel

。2）

{{{#if name.size}

不是正确的语法，也不是

{{else if name.colors}

。3） 您还需要遍历

值

数组。在Hello Gibin做一些研究，你能告诉我json格式应该如何处理{{{each}}吗？我发现你的代码有很多问题。1） 您需要使用{{#each}}帮助器循环遍历数组

lstModel

。2）

{{{#if name.size}

不是正确的语法，也不是

{{else if name.colors}

。3） 您还需要遍历

值

数组。在Hello Gibin做一些研究，你能告诉我json格式应该如何与{{{{each}}一起工作吗？谢谢你的回复。但是我声明了两个模板，并使用jqueryif条件检查json，然后填充这两个模板。可以通过这里的custom helper

ifCond

完成。您能给我发送json格式以使用custom helper ifCond吗？因为在handlebar js之前我用的是mustache js。所以我根据这个设置了Json的格式。我刚刚使用了您在问题中提供的Json。很高兴我能提供帮助：）谢谢您的回复。但是我声明了两个模板，并使用jqueryif条件检查json，然后填充这两个模板。可以通过这里的custom helper

ifCond

完成。您能给我发送json格式以使用custom helper ifCond吗？因为在handlebar js之前我用的是mustache js。因此，我根据这一点格式化了Json。我刚刚使用了您在问题中提供的Json。很高兴我能提供帮助：）