Knockout and jQuery Mobile

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">
<script src="http://knockoutjs.com/downloads/knockout-2.1.0.debug.js"></script>
<script id="cage-item" type="text/html">
    <li data-icon="delete"><a href="#" class="delete-link" data-bind="text: cageNumber, click: $parent.deleteCage"></a></li>
</script>

<div data-role="page" id="ReceiveAndActivateCages">       
	<div data-role="header" >
		<h1>Receive cages</h1>
	</div>
    
    <div data-bind="" data-role="content">
        <!-- error container -->
        
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Cages to Activate:</legend>
                <ul id="CageList" data-role="listview" data-inset="true" data-bind="template: { name: 'cage-item', foreach: cages,  afterRender: refreshCageListStyle, afterAdd: refreshCageListStyle, beforeRemove: refreshCageListStyleAfterDelete }">
                </ul>
                <div data-role="controlgroup">
                    <textarea id="Barcode" autofocus="autofocus" data-bind="value: barcodesString"></textarea>
                    <input type="button" id="AddCageButton" value="Add" data-inline="true" data-bind="click: resolveBarcodes" />
                </div>
            </fieldset>
        </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" data-inline="true">Receive and Activate</a>   
    </div>
    
	<div data-role="footer">
		<h4>
			©2013 Hogwarts
		</h4>
	</div>
</div>

JavaScript

(function(){
    function init() {
        var viewModel = new CageListViewModel();
       
        ko.applyBindings(viewModel);
        
        function CageListViewModel() {
            var self = this;
 
            /* Properties */
            self.cages = ko.observableArray([]);
            self.barcodesString = ko.observable('CG34545, CG4545, C43, CG45345 fgfg, ');   
         
            /* Methods */
            self.resolveBarcodes = function() {
                var barcodesString =  self.barcodesString();
                              
                if(barcodesString) {
                    // send barcodes to server
                    // server work emulation
                    var barcodes = barcodesString.match(/CG?(\d{1,15})/g);
                    var result = {
                        Result: 'Success',
                        Data: {
                            Cages: [
                                {
                                    Id: 1,
                                    CageNumber: 21323
                                } , 
                                {
                                    Id: 2,
                                    CageNumber: 11323
                                } , 
                                {
                                    Id: 3,
                                    CageNumber: 31323
                                } ,
                                {
                                    Id: 4,
                                    CageNumber: 41323
                                } 
                            ]
                        }
                    }                
                    
                    var cages = [];
                    ko.utils.arrayForEach(result.Data.Cages, function(cageData) {
                        cages.push(new CageViewModel(cageData));
                    });
                                        
                    self.cages(self.cages().concat(cages));
...