0

我是车把新手，我希望我的模板根据上下文隐藏和显示一个元素？

$( 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">&nbsp;</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 为假时隐藏标签但它似乎没有隐藏元素？这可以使用车把来完成吗？

4

0 回答 0