车把条件不起作用

时间:2018-06-06 08:13:03

标签: javascript handlebars.js

我有这样的车把模板......

{{#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}}

在模板文件中,我正在检查变量“logged_in”的值并根据其值打印不同的按钮。 变量“logged_in”的值由用户输入动态设置。

以下是从此建议的solution中获取的帮助程序功能

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

当我运行此代码时,没有按钮打印?我想我需要将“logged_in”变量的值传递给模板,但我不确定如何?

有人可以告诉我我做错了什么吗?感谢

1 个答案:

答案 0 :(得分:0)

找到解决方案....

我将帮助函数更改为

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>";  
        }  
    })  

这里的关键是不要在函数内传递任何东西,我能够使用任何动态值/变量做我想要执行的任何比较/条件。

在模板文件中,只需像这样调用printButton函数....

{{#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}}

我确信有更好的方法可以做到这一点,但它的目的是为了我的目的。