DataBindingButtonClick

by valchev

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" data-bind="events: { click: Login }">
        <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">Login</a>
        </li>
    </ul>
</div>

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

JavaScript

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

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

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