Build jqm with knockout

AJAX call with async

by ndkhoiits

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>
    <div data-role="page" id="page1">
        <div data-role="content">
            <div id="companies" data-bind="foreach: companies">
                <div data-role="collapsible1">
                    <h3>
                       <span data-bind="text: title"></span> 
                    </h3>
                    <span data-bind="text: description"></span>
                </div>
            </div>
        </div>
    </div>

JavaScript

$("#page1").live('pagecreate', function(event) {
    callService();
});

var SampleViewModel = function(data) {
    this.companies = ko.observable(data);
}
    
var data = {
        json: $.toJSON({
            companies : [
                {
                    title: "IBM",
                    description: "IBM Company"
                },
                {
                    title: "Microsoft",
                    description: "Develop Windows"
                },
                {
                    title: "Apple",
                    description: "Develop Mac OS"
                }
            ],
        }),
        delay: 3
}

function callService() {

    $.ajax({
        url:"/echo/json/",
        data: data,
        type: "POST",
        success: function(response)
        {
           ko.applyBindings(new SampleViewModel(response.companies));
$('div[data-role="collapsible1"]').attr('data-role', 'collapsible');
$("#companies").trigger('create');
        }  
    });

}