Handlebar conditional not working

问题

I have a handlebar template like this ...

{{#cards}}    
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">{{ Session_type }}</h4>
               </div>
               <div class="modal-body">
        <p>{{ Title }}</p>
        <p>{{ Location }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    {{#equals logged_in "Yes"}}
        <button type="button" class="btn btn-primary check_od_session">Add to my Planner</button>
    {{else}}
        {{#equals logged_in "No"}}
            <button type="button" class="btn btn-primary check_od_session">Login/Register to add to your Planner</button>
        {{/equals}} 
    {{/equals}} 
      </div>
    </div>
  </div>
</div>
 {{/cards}}

In the template file, I am checking the value of a variable "logged_in" and printing different button depending upon it value. The value of a variable "logged_in" is set dynamically by user input.

Here is the Helper function taken from this suggested solution.

var logged_in = 'No';
Handlebars.registerHelper("equals", function(string1 ,string2, options) {
    if (string1 === string2) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

When I run this code, none of the button is getting printed ? I think I need to pass the value of "logged_in" variable to the template, but I am not sure how ?

Can someone please advise what am I doing wrong ? Thanks

回答1:

Found a solution ....

I changed the helper function to

Handlebars.registerHelper("printButton", function() {  
        if (logged_in == 'Yes') {  // logged_in is a dynamic variable whose value is set by user input.
            return "<button type='button' class='btn btn-primary check_od_session'>Add to my Planner</button>";  
        } else {  
            return "<button type='button' class='btn btn-primary check_od_session'>Login Register to add to your Planner</button>";  
        }  
    })

The key here is not to pass anything inside the function and I was able to do whatever comparisons/conditions I want to perform using any dynamic values/variables.

And in the template file, simply called the printButton function like this....

{{#cards}}    
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">{{ Session_type }}</h4>
               </div>
               <div class="modal-body">
        <p>{{ Title }}</p>
        <p>{{ Location }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    {{{ printButton }}}
      </div>
    </div>
  </div>
</div>
 {{/cards}}

I am sure there are better ways of doing this, but its working for my purposes.

来源：https://stackoverflow.com/questions/50715374/handlebar-conditional-not-working

标签

javascript

handlebars.js