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.

<!DOCTYPE html>
    <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>

AMD Module common.js

    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",
        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




}) ;

Router js usingn sammyjs and sammyjs template

     return Sammy( function() {
         this.element_selector = 'body';
         this.get('#/', function(context) {

         this.get('#/item', function(context) {



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

<script type="text/javascript">

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

    <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>


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