javascript - 如何使用 JS、Telerik 和 Kendo UI 动态启用数据标签？

Question

我正在使用 Telerik 的 App Builder 和 Kendo UI 尝试构建 SPA 应用程序。我对使用 Telerik 和 Kendo UI 很陌生，请原谅代码。我想完成两件事。

1. 启用滑动打开和隐藏登录头像，直到用户登录。
2. 当用户注销时返回登录屏幕并禁用滑动以打开和隐藏登录标题图像。

我尝试在布局中添加:data-swipe-to-open="false"，使用布局中标题上的 .hide。当我使用 data-swipe-to-open="false"时，#appDrawer 没有打开(这是我想要的)但我无法设置 data-swipe-to-open = true。我找不到 Telerik 的任何文档。

感谢任何和所有反馈。

Login screen as of now

Swipe on login

HTML

    <!--Login View-->
    <div id="tabstrip-login"
         data-role="view"
         data-title="Login"
         data-model="app.loginService.viewModel"
         data-before-show="app.loginService.beforeShow"
         data-after-show="app.loginService.afterShow">

        <div style="background-image:url(/xxxx.png); background-position:top; background-repeat:no-repeat; background-size:contain; background-color:white;">
            <div style="min-width:325px; min-height:144px;"></div>
        </div>
        <div data-bind="visible: isLoggedIn">
            <div data-bind="visible : isExpired">
                Expired Card info
            </div>
            <div id="dvCardInfoContainer" class="panel panel-default " style="background-color:white;" data-bind="invisible : isExpired">




                <div class="panel panel-body" style="background-image:url(img/xyx.png); background-size:cover; background-position:center; background-color:white; ">

                    <div style="display:flex; flex-flow: row nowrap;  align-content:center; justify-content:center; align-items:center;">
                        <div class="dvVerticalTextContainerLeftSide"><div id="memberStatusTop" data-bind="text :memberStatus" class="dvVerticalTextLeftSide capText bold"></div></div>

                        <div class="dvCenterVerticalContainer">
                            <ul>
                                <li data-bind="text :attCompanyName"></li>

                                <li data-bind="text :attAircraftTypes"></li>

                                <li data-bind="text :attAircraftRegNum"></li>

                                <li class="bold" data-bind="text :attExpirationDate"></li>

                                <li data-bind="text :calcDateTillExp"></li>


                            </ul>




                        </div>

                        <div class="dvVerticalContainerRightSide"><div class="dvVerticalTextRightSide capText bold" data-bind="text :memberStatus" id="memberStatusBottom"></div></div>

                    </div>
                    <div id="goodStanding" class="text-center capText bold"> TEXT </div>


                </div>




            </div>
        </div>

        <form data-bind="events: { keyup: checkEnter }">

            <ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
                <li>
                    <label>
                        <div>Username</div>
                        <input type="text" data-bind="value: username" />
                    </label>
                </li>
                <li>
                    <label>
                        <div>Password</div>
                        <input type="password" data-bind="value: password" />
                    </label>
                </li>
            </ul>
            <input id="login" type="submit" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" value="Login" class="login-button" />
        </form>
    </div>

布局

        <div data-role="layout" data-id="tabstrip-layout">
            <header id="hdr" data-role="header">
                <div data-role="navbar" >
                    <span data-role="view-title"></span>
                    <a data-role="button" href="#appDrawer" data-rel="drawer"  data-align="left" data-icon="details"></a>
                </div>
            </header>

            <!-- application views will be rendered here -->
        </div>
    <div id="appDrawer" data-role="drawer" data-title="Navigation">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
        <ul id="navigation-container" data-role="listview">
            <li><a href="#tabstrip-login" data-icon="refresh">Membership Card</a></li>
            <li><a href="#tabstrip-cardInfo" data-icon="refresh">Card Info</a></li>

            <li><a onclick="app.clearLocalStorage();">Log Out</a> </li>

        </ul>
    </div>

---

应用程序.js

(function (global) {
    var app = global.app = global.app || {};

    app.clearLocalStorage = function () {
        localStorage.clear();
        app.loginService.viewModel.set("isLoggedIn", false);

    }

    app.makeUrlAbsolute = function (url) {
        var anchorEl = document.createElement("a");
        anchorEl.href = url;
        return anchorEl.href;
    };

    document.addEventListener("deviceready", function () {
        navigator.splashscreen.hide();

        app.changeSkin = function (e) {
            var mobileSkin = "";

            if (e.sender.element.text() === "Flat") {
                e.sender.element.text("Native");
                mobileSkin = "flat";
            } else {
                e.sender.element.text("Flat");
                mobileSkin = "";
            }

            app.application.skin(mobileSkin);
        };

        var element = document.getElementById('appDrawer');
        if (typeof (element) != 'undefined' && element !== null) {
            if (window.navigator.msPointerEnabled) {
                $('#navigation-container').on('MSPointerDown', 'a', function (event) {
                    app.keepActiveState($(this));
                });
            } else {
                $('#navigation-container').on('touchstart', 'a', function (event) {
                    app.keepActiveState($(this));
                });
            }
        }





        app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout", skin: 'nova'});
        //$("#hdr").hide();

       // app.loginService.viewModel.set("isLoggedIn", true);



    }, false);

    app.removeActiveStatus = function _removeActiveState(item) {
        var currentItem = item;
        $('#navigation-container li a.active').removeClass('active');
        currentItem.addClass('notActive');
    }

    app.keepActiveState = function _keepActiveState(item) {
        var currentItem = item;
        $('#navigation-container li a.active').removeClass('active');
        currentItem.addClass('active');


    };
    app.isOnline = function () {
        if (!navigator || !navigator.connection) {

            return true;
        } else {

            return navigator.connection.type !== 'none';
        }




    };




})(window);

登录.js

function loadState() {
var cardData = localStorage.getItem("userAttributeList");
if (cardData) { 





    var obj = JSON.parse(localStorage.getItem("userAttributeList"));
    var companyName = obj[0].attData;
    var airCraftTypes = obj[23].attData;
    var airCraftRegNum = obj[24].attData;
    var memberType = obj[1].attData;
    var x = obj[17].attData;//experation date
    var daysTillExpire = app.loginService.viewModel.calcDate(x);
    var expirationDate = app.loginService.viewModel.formatDate(x);
    app.loginService.viewModel.set("attCompanyName", companyName);
    app.loginService.viewModel.set("attAircraftTypes", airCraftTypes);
    app.loginService.viewModel.set("attAircraftRegNum", airCraftRegNum);
    app.loginService.viewModel.set("attExpirationDate", "Expires: " + expirationDate);
    app.loginService.viewModel.set("calcDateTillExp", "Days to expiration: " + daysTillExpire); 

    var strMembershipDecision = "Paid Members";
    if (strMembershipDecision == memberType) {
        app.loginService.viewModel.set("memberStatus", "Prefered Member");
    }
    else { app.loginService.viewModel.set("memberStatus", "Trial Member"); }


    if (daysTillExpire <= 0) {
        app.loginService.viewModel.wipeout();





    }
    //app.loginService.viewModel.set("data-swipe-to-open", true);

    $("#appDrawer").data("kendoMobileDrawer");
}

else { }
}

    (function (global) {
    var LoginViewModel,
    app = global.app = global.app || {};


    // default empty credentials


    // configure the local-storage adapter


LoginViewModel = kendo.data.ObservableObject.extend({
    userDataSoruce: null,
    isLoggedIn: false,
    isExpired: false,
    showExpired: false,
    username: "",
    password: "",
    authUrl: '',
    userUrl: '',
    groupUrl: '',
    token: null,
    groupId: "",
    orgId: "",
    userId: "",
    cardData: null,
    airCraftTypes: null,
    expirationDate: null,
    memberGroupStatus: null,
    memberType: null,
    airCraftRegNum: null,
    companyName: null,
    daysTillExpire: null,



    onLogin: function () {
        var that = this,
            username = that.get("username").trim(),
            password = that.get("password").trim();

        if (username === "" || password === "") {
            navigator.notification.alert("Both fields are required!",
                function () { }, "Login failed", 'OK');

            return;
        }

        this.getAuthToken();





    },

    onLogout: function () {
        var that = this;

        that.clearForm();
        that.set("isLoggedIn", false);
    },

    clearForm: function () {
        var that = this;

        that.set("username", "");
        that.set("password", "");
    },

    checkEnter: function (e) {
        var that = this;

        if (e.keyCode == 13) {
            $(e.target).blur();
            that.onLogin();
        }
    },
    checkAuth: function (response) {
        var that = this;

        if (response) {
            that.getCardInfo();
        }
        else { alert('Not success'); }

    },
    getAuthToken: function () {
        var that = this, dataSource;
        var response = false;

        dataSource = new jQuery.ajax({
            type: "POST",
            url: that.authUrl,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: 'apiKey=' + '&username=' + that.username + '&password=' + that.password,
            username: that.username,
            password: that.password,
            success: function (data, status) {
                that.token = data.token;
                that.groupId = data.groupId;
                that.orgId = data.orgId;
                that.userId = data.userId;
                response = true;
                that.checkAuth(response);
                localStorage.setItem("usertoken", data.token);
                localStorage.setItem("username", that.username);
                localStorage.setItem("password", that.password);
                localStorage.setItem("groupId", data.groupId);
                localStorage.setItem("orgId", data.orgId);
                localStorage.setItem("userId", data.userId);
            },
            error: function (error) {

                alert('Error in validing username and password.');
                response = false;
                that.checkAuth(response);
                return false
            }
        });
    },

    getCardInfo: function () {
        var that = this, datasoruce;
        datasoruce = new jQuery.ajax({
            type: "GET",
            url: '' + that.userId + '/attribute',
            contentType: "application/json",
            dataType: "json",
            headers: { 'Authorization': that.token },
            success: function (data, status) {


                localStorage.setItem("userAttributeList", JSON.stringify(data.attribute));
                that.cardData = JSON.stringify(data.attribute);
                that.loadData();
            },
            error: function (error) {
                console.log(JSON.stringify(error));
            }
        })



    },

    loadData: function () {
        var that = this;
        var obj = JSON.parse(that.cardData);
        that.companyName = obj[0].attData;
        that.airCraftTypes = obj[23].attData;
        that.airCraftRegNum = obj[24].attData;
        var memberType = obj[1].attData;
        var x = obj[17].attData;//experation date
        that.daysTillExpire = this.calcDate(x);
        that.expirationDate = this.formatDate(x);
        that.set("attCompanyName", that.companyName);
        that.set("attAircraftTypes", that.airCraftTypes);
        that.set("attAircraftRegNum", that.airCraftRegNum);
        that.set("attExpirationDate", "Expires: " + that.expirationDate);
        that.set("calcDateTillExp", "Days to expiration: " + that.daysTillExpire);
        that.set("isLoggedIn", true);


        //checking for membership status
        var strMembershipDecision = "Paid Members";
        if (strMembershipDecision == memberType) {
            that.set("memberStatus", "Prefered Member");
        }
        else { that.set("memberStatus", "Trial Member"); }


        if (that.daysTillExpire <= 0) {
            this.wipeout();

        }



    },
    checkMembershipStatus: function (memberStatus, numDaysToExp) {

    },
    wipeout: function () {
        var that = this;
        that.set("isExpired", true);
        that.set("showExpired", true);

    },
    formatDate: function (expirationDate) {
        var date = new Date(); //date of experation
        date.setYear(parseInt(expirationDate.substr(0, 4), 10));
        date.setMonth(parseInt(expirationDate.substr(4, 2), 10) - 1);
        date.setDate(parseInt(expirationDate.substr(6, 2), 10));
        date.setHours(parseInt(expirationDate.substr(8, 2), 12)); // 201609290000
        date.setMinutes(parseInt(expirationDate.substr(10, 2), 12));
        return (date.toLocaleDateString());

    },

    calcDate: function (expirationDate) {


        var date = new Date(); //date of experation
        date.setYear(parseInt(expirationDate.substr(0, 4), 10));
        date.setMonth(parseInt(expirationDate.substr(4, 2), 10) - 1);
        date.setDate(parseInt(expirationDate.substr(6, 2), 10));
        date.setHours(parseInt(expirationDate.substr(8, 2), 12)); // 201609290000
        date.setMinutes(parseInt(expirationDate.substr(10, 2), 12));



        var today = new Date(); //Setting todays date
        today.setYear(today.getFullYear());
        today.setMonth(today.getMonth());
        today.setDate(today.getDate());
        var millisecondsPerDay = (1000 * 60 * 60 * 24);
        var millsBetween = (date.getTime() - today.getTime());
        var numExpDays = Math.floor(millsBetween / millisecondsPerDay);



        return (numExpDays);
    }



});

app.loginService = {


    viewModel: new LoginViewModel(), 
    afterShow: function () {  



    },

    beforeShow: function () {

       loadState();

    },
     //   
     //   //loadState();
     //var x =   app.loginService.viewModel.get("companyName")
     //alert(x);


      //  app.loginService.viewModel.isLoggedIn = true;
        //logic to determine if user is logged in or not.



    onShow: function () {




    }
};

})(window);

Answer 1

我使用这个创建了一个解决方法

<a data-role="button" href="#appDrawer" data-rel="drawer"  data-align="left" data-icon="details" data-bind="visible: isLoggedIn"></a>