ListView Refresh Testing

by marhaba

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css">
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<div id="v0" data-role="view" data-layout="mobile-view" data-model="viewModel" data-title="Groups" data-show="viewModel.goToView1"></div>

<div id="v1" data-role="view" data-layout="mobile-view" data-model="viewModel" data-title="Groups">
    <ul id="lv1" data-bind="source:groupSource, click: selectGroup" data-role="listview" data-style="inset" data-template="t1">
        <!--Set this attribute to listview to correct listview population/behavior but without immediate population: data-auto-bind="false"!-->
    </ul>
    <div id="buttons">
        <a id="refreshButton" data-bind="click:refreshZero" data-role="button">Refresh Zero</a>
        <a id="refreshButton" data-bind="click:refreshOne" data-role="button">Refresh One</a>
        <a id="refreshButton" data-bind="click:refreshTwo" data-role="button">Refresh Two</a>
    </div>
</div>
<script id="t1" type="text/x-kendo-template">
    <a>${Name}</a>
</script>

<div data-role="view" id="v2" data-layout="mobile-view" data-model="viewModel" data-title="People">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button km-back" data-align="left" data-role="button" data-click="viewModel.goToView1">Back</a>
            <span data-role="view-title"></span>
        </div>
    </header>
    <label id="t">Title</label><label id="n">Name</label>
    <ul id="lv2" data-bind="source:peopleSource" data-role="listview" data-style="inset" data-template="t2"></ul>
</div>
<script id="t2" type="text/x-kendo-template">
    <label style="float:left">${Person.Job.Title}</label>
    <label style="float:right">${Person.PersonalInfo.Name}</label>
</script>

<!--default mobile settings-->
<div data-role="layout"...

CSS

#t {
    float:left;
    margin-top:35px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#n {
    float:right;
    margin-top:35px;
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
#buttons {
    text-align: center;
}
.km-ios .km-navbar {
    height: 44px;
}

JavaScript

var app;

$(document).ready(function() {
    //Start the mobile application
    app = new kendo.mobile.Application($(document.body), { 
        transition: "slide"
    });
});

$.mockjax({
    url: 'data/2',
    responseTime: 0,
    responseText: [
        {
            "Name": "Pirates",
            "People": 
            [
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "Jack Sparrow"
                        },
                        "Job": {
                            "Title": "Captain"
                        }
                    }
                },
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "Jack the Monkey"
                        },
                        "Job": {
                            "Title": "Immortal Monkey"
                        }
                    }
                }
            ]
        },
        {
            "Name": "Citizens",
            "People": 
            [
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "William Turner"
                        },
                        "Job": {
                            "Title": "Blacksmith"
                        }
                    }
                },
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "Elizabeth Swann"
                        },
                        "Job": {
                            "Title": "Lady"
                        }
                    }
                }
            ]
        }
    ]
});
$.mockjax({
    url: 'data/1',
    responseTime: 0,
    responseText: [
        {
            "Name": "Pirates",
            "People": 
            [
                {
                    "Person": {
                        "PersonalInfo": {
        ...