PhoneJS

by tabalinas

HTML

<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.ios.default.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.9/js/dx.phonejs.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.common.css">
<div class="dx-viewport dx-theme-ios dx-version-major-6 dx-theme-ios-typography">
    <div id="urunlertile" data-bind="dxTileView: { height: '550', dataSource: productsSource, itemClickAction: notifiy, baseItemHeight: 70, baseItemWidth: 150, itemMargin: 3,  }">
        <div data-options="dxTemplate:{name:'item'}">                    
            <p><span data-bind="text: $data.CategoryName"></span></p>
            <p><span data-bind="text: $data.ProductName"></span></p>
        </div>                           
    </div>
</div>

CSS

.dx-tileview {
    border: 1px solid #ddd;    
}

.dx-tile {
    border-radius: 5px;
    border: 1px solid #ededed;
    padding: 5px;
}

.dx-tile.dx-state-active {
    background: #fcfcfc;
}

JavaScript

var vm = {
    
    quickBooking: {
    load: function (loadOptions) {
        vm.loading(true);
        if (loadOptions.refresh) {
            var deferred = new $.Deferred();
            callService("GetEmployee",
                        {
                            employeeNo: 'id'
                        },
                        function (result) {
                            var mapped = $.map(result, function (data) {
                                return {
                                    name: data.LastNProjects? data.LastNProjects["Name"]:"blah",
                                    project: data.LastNProjects? data.LastNProjects["Address"]:"blah",
                                    costCenter: data.LastNCostCenters? data.LastNCostCenters["Name"]:"blah"
                                }
                            });
                            deferred.resolve(mapped);
                            vm.loading(false);
                        });
            return deferred.promise();
        }
    },
}
};

ko.applyBindings(vm);