Handlebars：使用IF语句显示不同的HTML标记

Question

部分：

<h2>{{regionName}}</h2>
{{~#if @root.config.isMobile}}<ul>{{else}}<div>{{/if~}}
    {{~#each stores~}}
       {{~#if @root.config.isMobile}}<li>{{/if~}}
           {{> address-partial }}
       {{~#if @root.config.isMobile}}</li>{{/if~}}
    {{~/each~}}
{{~#if @root.config.isMobile}}</ul>{{else}}</div>{{/if~}}

错误：

Error: Unable to find closingIf after {"name":"openingIf","value":"@root.config.isMobile"}. (token: 31)
    at findClosingTokenInner (filename:3600:8)
    at findClosingToken (filename:3635:16)

从第一行和最后一行删除波浪号后 - 同样的错误。

从代码中删除所有波浪号后 - 相同的错误。

删除除第一行和最后一行之外的所有内容 - 新错误：

Error: Unable to find closingTag after {"name":"openingTag","value":"ul"}. (token: 26)
    at findClosingTokenInner (filename:3600:8)
    at findClosingToken (filename:3635:16)

这非常有效：

{{~#if @root.config.isMobile~}}
    <h2>{{regionName}}</h2>
    <ul>
        {{~#each stores~}}
           <li>
               {{> address-partial }}
           </li>
        {{~/each~}}
    </ul>
{{~else~}}
    <h2>{{regionName}}</h2>
    <div>
        {{~#each stores~}}
           {{> address-partial }}
        {{~/each~}}
    </div>
{{~/if~}}

你可以看到现在多久了，我正在重复几乎所有的信息。有没有办法让原始代码与把手一起工作，或者我错过了什么（可能非常简单......）？

另外，如果你能解释为什么这个问题是一个问题，我将永远感激不尽。

谢谢！！！

Answer 1

下面是您的方法的测试片段和没有〜的相同方法。一切正常，除了删除方法3和4之外，我没有做任何修改。尝试使用更新版本的车把。

$(document).ready(function () {
  var context = {
    "config" : { "isMobile": true }, 
    "regionName": "Region1", 
    "stores" : [ 
        {"name":"store1", "address":"address1"},
        {"name":"store2", "address":"address2"},
        {"name":"store3", "address":"address3"}
        ]
  };
	var source   = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html    = template(context);
  $("#resultPlaceholder").html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
{{#*inline "address-partial"}}
  {{name}} - {{address}}
{{/inline}}
Method 1 : ~ + compact
<h2>{{regionName}}</h2>
{{~#if @root.config.isMobile}}<ul>{{else}}<div>{{/if~}}
    {{~#each stores~}}
       {{~#if @root.config.isMobile}}<li>{{/if~}}
           {{> address-partial }}
       {{~#if @root.config.isMobile}}</li>{{/if~}}
    {{~/each~}}
{{~#if @root.config.isMobile}}</ul>{{else}}</div>{{/if~}}
Method 2 : long + ~
{{~#if @root.config.isMobile~}}
    <h2>{{regionName}}</h2>
    <ul>
        {{~#each stores~}}
           <li>
               {{> address-partial }}
           </li>
        {{~/each~}}
    </ul>
{{~else~}}
    <h2>{{regionName}}</h2>
    <div>
        {{~#each stores~}}
           {{> address-partial }}
        {{~/each~}}
    </div>
{{~/if~}}
Method 3 : no ~ + long
{{#if @root.config.isMobile}}
    <h2>{{regionName}}</h2>
    <ul>
        {{#each stores}}
           <li>
               {{> address-partial }}
           </li>
        {{/each}}
    </ul>
{{else}}
    <h2>{{regionName}}</h2>
    <div>
        {{#each stores}}
           {{> address-partial }}
        {{/each}}
    </div>
{{/if}}
Method 4 : no ~ + compact
<h2>{{regionName}}</h2>
{{#if @root.config.isMobile}}<ul>{{else}}<div>{{/if}}
    {{#each stores}}
       {{#if @root.config.isMobile}}<li>{{/if}}
           {{> address-partial }}
       {{#if @root.config.isMobile}}</li>{{/if}}
    {{/each}}
{{#if @root.config.isMobile}}</ul>{{else}}</div>{{/if}}
</script>
<br/>
<div id="resultPlaceholder">
</div>