Jquery Mobile application with Require JS and Sammy

Jquery Mobile application with Require JS and Sammy

Hi I am pretty new to web apps in Mobile device. I am evaluating couple of libraries that i will be using for my upcoming project and i have chosen Jquery Mobile,Sammy and Require JS. I was trying to integrate them in a sample app to get familiarize and i am completely thrown off . I am trying to do a basic stuff basically loading the modules using requirejs and redirecting the user to a template. To my surprise i see that template is getting loaded to DOM but the jquery styling is never applied i have no idea what is the reason. I am trying to append the template directly to the body of my  start  page which is index.html. I tried to append it in div but jquery mobile wraps the div into a page and nesting page is not available in jqury mobile. Any help will be greatly appreciated. I am also pasting some code to give high lebel idea what i am trying to acheive.

index.html
----------------
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>New Project</title>
    <link rel="stylesheet" href="styles/jquery.mobile-1.3.1.css"/>
    <link rel="stylesheet" href="styles/style.css" />
    <script type="text/javascript" src="js/require/require.js" data-main="js/common"></script>
</head>
<body>
</body>
</html>

AMD Module common.js
-------------------------------------

require.config({
    baseUrl: "js/",
    paths: {
        jquery: 'lib/jquery/jquery-1.10.1',
        'jquery.mobile': 'lib/jquery/jquery.mobile-1.3.1',
        'jquery.mobile.config': 'lib/jquery/jquery.mobile.config',
        underscore: "lib/underscore/underscore",
        ko: "lib/knockout/knockout.min",
        postal: "lib/postal/postal",
        amplify: "lib/amplify/amplify",
        text: "require/text",
        sammy: "lib/sammy/sammy",
        'sammy.template':"lib/sammy/plugin/sammy.template",
        router : "Router"

    },
    priority: ['jquery', 'jquery.mobile','jquery.mobile.config','sammy','sammy.template'],
    shim: {
         ko: {
            exports: "ko"
        },

        underscore: {
            exports: "_"
        },
        amplify: {
            exports: "amplify"
        },
        'jquery.mobile': ['jquery','jquery.mobile.config'],
        'sammy': { deps: ['jquery','jquery.mobile'], exports: 'Sammy' } ,
        'sammy.template': { deps: ['sammy']},
        'router': { deps: ['sammy.template']}
    },

    waitSeconds: 60

});

require(["jquery",'router',"jquery.mobile"],function($,Router,){

    console.log('1');
    //GlobalContext.initialize();


}) ;

Router js usingn sammyjs and sammyjs template
-------------------------------------------------------------
define(['jquery','sammy','sammy.template'],function($,Sammy){

     return Sammy( function() {
         this.use('Template');
         this.element_selector = 'body';
         this.get('#/', function(context) {
             context.app.swap('');
             alert(context.$element());
             context.render('view/hello.template')
                 .appendTo(context.$element());
         })
         .then(function(){
                $('#main').trigger("create")
         });

         this.get('#/item', function(context) {
             context.app.swap('');
             context.render('view/page2.template')
                 .appendTo(context.$element());

         });

     }).run('#/');

the template i am trying to load file name hello.template
---------------------------------------------------------------------

<script type="text/javascript">
           require(["jquery","jquery.mobile"],function($){
                console.log('2');
                $('#myText').val('AAAA');
           });

</script>
 <div data-role="page">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Main Menu</h1>
    </div>

    <div data-role="content">

        <input type = "text"
                         id = "myText"
                         value = "text here" />

       <ul data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
       </ul>

    </div>

    <div data-role="footer">
            <h4>Page Footer</h4>
    </div>

</div>