我是车把新手,我希望我的模板根据上下文隐藏和显示一个元素?
$( document ).ready( function() {
var data = {
LoginHeader_Label : "",
Token1 : {
Token1_Label : "User Login",
Token1_Visibility : false,
Token1_Required : true
},
Token2_Label : "Password",
Login_Button : "Login",
Clear_Button : "Clear"
};
Handlebars.registerHelper('i18n', function(obj) {
if( ! obj.Token1_Visibility ) {
$('.Token1').hide();
}
return obj.Token1_Label;
});
var source = $("#user-template").html();
var template = Handlebars.compile(source);
$('body').append(template(data));
});
html
<div class="component" id="UserLogin">
<form name="userLoginForm" data-hideRequiredIndicator="true">
<div class="container boldLabel">
<div class="userLoginForm">
<div class="loginForm" id="loginTitle">
<label><bd>{{LoginHeader_Label}}</bdi></label>
</div>
<div class="loginForm">
<div class="cell Token1">
<label for="txtToken1"><bdi>{{i18n Token1 }}</bdi></label>
</div>
<div class="cell Token1">
<input type="text" id="txtToken1" name="token1" class="focusOnTab" />
</div>
</div>
<div class="loginForm">
<div class="cell Token2">
<label for="txtToken2"><bdi>{{Token2_Label}}</bdi></label>
</div>
<div class="cell Token2">
<input type="password" id="txtToken2" name="token2" class="focusOnTab" />
</div>
<div class="cell">
<input type="hidden" name="loginForm" value="true" />
</div>
</div>
<div class="loginForm serviceErrMsgContainer">
<div class="cell"></div>
</div>
<div class="loginForm">
<div class="cell"> </div>
<div class="cell buttonRow">
<span class="Login">
<button type="button" class="login focusOnTab"><bdi>{{Login_Button}}</bdi></button>
</span>
<span class="Clear">
<button type="button" class="clear focusOnTab"><bdi>{{Clear_Button}}</bdi></button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
我有一个对象,其中每个车把表达式都有一个嵌入式对象。所以我从对象中设置标签并在 _visibility 为假时隐藏标签但它似乎没有隐藏元素?这可以使用车把来完成吗?