Question

我想在hbs文件中使用if else，如果{{NumLikes}}大于0那么第一个图像是第二个图像，那么如何使用骨干在hbs模板文件中使用if else。 JS。我正在使用handelsbar作为模板。

<div>
        < div class="comm-tab-row">
            <div class="post-left-panel">
                <div class="post-image-container">
                 <img src="{{UserImageURL}}" alt="" class="post-image"  /></br>     
                <% if ({{NumLikes}} = 0) { %>
                    <img src="images/myCommunity/like@2x.png" width="20" height="19" id="like-btn" name = "like-Button" >               
                <% } else { %>
                    <img src="images/myCommunity/liked@2x.png" width="20" height="19" id="like-btn" name = "like-Button" >
                <%  } %>            
                ({{NumLikes}})          
                </div>
            </div>      
            <div class="post-body">
                <h5 class="comm-tab-heading">
                    <span class="navigate-screen" id="{{Id}}" style="text-decoration:underline;">
                        {{UserName}}
                    </span>
                    <span>
                         - &nbsp;
                    </span>
                    <span>
                       {{format_date Time ""}}
                    </span>
                </h5>
                {{Message}}
                </div>
                <div class="comm-right-panel">
                <a href="javascript:void(0);" class="btn-follow" name = "follow-button">FOLLOW</a>
                    <a href="javascript:void(0);" class="btn-comment" name = "comment-button">{{NumComments}} - COMMENT</a>
            </div>  
            </div>

        </div>
    </div>

Answer 1

您不需要自定义助手，标准{{#if}}将使用零做正确的事情。例如，这个模板：

<script id="t" type="text/x-handlebars">
    {{#if a}}a{{else}}!a{{/if}}<br>
    {{#if b}}b{{else}}!b{{/if}}<br>
</script>

和这段代码：

var t = Handlebars.compile($('#t').html());
$('body').append(t({
    a: 0,
    b: 1
}));

会为您提供!a和b作为输出。演示：http://jsfiddle.net/ambiguous/tUAyZ/

你的模板应该这样说：

{{#if NumLikes}}
    <img src="images/myCommunity/like@2x.png" width="20" height="19" id="like-btn" name = "like-Button" >               
{{else}}
    <img src="images/myCommunity/liked@2x.png" width="20" height="19" id="like-btn" name = "like-Button" >
{{/if}}

Answer 2

您需要编写如下帮助器，因为手柄不直接支持与值进行比较。

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

在您的车把模板中，您需要使用它，如下所示

<div class="post-left-panel">
    <div class="post-image-container">
    <img src="{{UserImageURL}}" alt="" class="post-image"  /></br>     
    {{#ifCond NumLikes}}
        <img src="images/myCommunity/like@2x.png" width="20" height="19" id="like-btn" name = "like-Button" >
    {{else}}
        <img src="images/myCommunity/liked@2x.png" width="20" height="19" id="like-btn" name = "like-Button" >
    {{/if}}
    ({{NumLikes}})          
    </div>
</div>

如何在hbs骨干模板文件中使用if else，我使用handelsbar作为模板

2 个答案: