dynamic list view

by chintsu

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css">
<div data-role="page" id="ReceiveAndActivateCages">       
	<div data-role="header" >
		<h1>Receive cages</h1>
	</div>

	<div data-role="content">   
        <div class="validation-summary-errors js-errors-summary"></div>

        <div id="UsePrintedCardsForm">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <legend>Cages to Activate:</legend>
                    <p id="ActivatedCagesWarning" class="note-cages-activates" style="display: none">Some cages are already activated</p>

<ul id="CageList" data-role="listview" data-inset="true">
 <!--<li data-role="list-divider">Mail <span class="ui-li-count">12</span></li>
 <li class="cageRow cage-activated" data-icon="delete"><a href="#" class="delete-link">CageNumber</a></li>
 <li class="cageRow cage-activated" data-icon="delete"><a href="#" class="delete-link">CageNumber</a></li>
 <li data-role="list-divider">Contacts <span class="ui-li-count">Done</span></li>
 <li class="cageRow cage-activated" data-icon="delete"><a href="#" class="delete-link">CageNumber</a></li>
 <li class="cageRow cage-activated" data-icon="delete"><a href="#" class="delete-link">CageNumber</a></li>-->
</ul>
                    <div id="BarcodeErrors"></div>
                    <div data-role="controlgroup">
                        <input type="text" id="Barcode" autofocus="autofocus" />
                        <input type="button" id="AddCageButton" value="Add" data-inline="true" />
                    </div>
                </fieldset>
            </div>
        </div>
    
        <a href="http://en.wikipedia.org" rel="external" data-role="button" data-inline="true">Cancel</a>
        <a id="UsePreprinted" href="#" data-role="button" data-theme="b" data-icon="check"...

JavaScript

(function(){
    function init(settings) {
        var cageListModel = new CageListViewModel(settings);
         
        function CageListViewModel(settings) {
            var self = this,
                $cageList = $('#CageList'),
                $barcodeField = $('#Barcode');
            
            /* Properties */
            self.requisitions = [];
            self.cageDictionary = {};
            
            initEvents();
            
            function initEvents() {
                $('#AddCageButton').click(function(){
                    resolveBarcode($barcodeField.val());
                });
                
                $cageList.on('click', '.delete-link', function(event) {
                    event.preventDefault();
                    
                    deleteCage($(this).data('cage-id'));
                });
            }
            
            /* Methods */
            function getCageIds(){
                var cageIds = [];
                
                $.each(self.cageDictionary, function(cageId){
                    cageIds.push(cageId);
                });
                
                return cageIds;
            }
            
            var dummyCount = 0;
            
            function resolveBarcode(barcode) {
                /* post to server*/
                var data = { 
                    barcode: barcode,
                    cageIds: getCageIds()
                };
                
                var result;
                
                switch(dummyCount) {
                    case 0:
                        result = {
                            Status: 'Success',
                            Data: {
                                Cage: { Id: 5, CageNumber: 345987, IsActivated: true },
                                Requisition: { Id: 666, RequisitionNumber: 'Q123654', CagesLeft: 3 }
                            }
                        };
                        break;
                    case 1:
    ...