DataBindingButtonClick

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
   <div data-role="view" id="LandingPage" data-layout="Layout" data-init="autoLogin" data-before-show="onBeforeShow">
       Hello world!
    </div>

    <div data-role="view" id="LoginView" data-layout="Layout" data-model="LoginViewModel" data-title="Login Screen">
        <div id="loginPopup" class="messagepopup" >
            <span id="loginMessage"></span>
        </div>
        <ul data-role="listview" data-style="inset">
            <li>
                <label for="username">Username:</label>
                <input id="loginName" type="text" data-bind="value: loginName" />
            </li>
            <li>
                <label for="password">Password:</label>
                <input id="password" type="password" data-bind="value: password" />
            </li>
            <li>
                <a id="loginButton" data-role="button" data-bind="click: Login">Login2</a>
            </li>
        </ul>
    </div>

    <div data-role="layout" data-id="Layout">
      sapmle
    </div>

JavaScript

var LoginViewModel = kendo.observable({
    loginName: null,
    password: null,
    Login: function (e) {
        app.navigate("#LandingPage", null);
    }
});

var app = new kendo.mobile.Application();

function onBeforeShow(e) {
    e.preventDefault();
    app.navigate("#LoginView");
    e.view.unbind("beforeShow");
}