Ember & Jquery Mobile

by amindunited

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<div data-role="page" id="page_2" data-add-back-btn="true">
    <div data-theme="a" data-role="header">
        <h3>
            Header
        </h3>
    </div>
                
    <div data-role="content">
        <h1><a href="#moop" id="moop">Page TWO</a></h1>
        <p id="arg"></p>
        
    </div>
    
    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
 
</script>


<script>
$(document).bind("mobileinit", function(){
    $.extend(  $.mobile , {
        linkBindingEnabled: false,
        hashListeningEnabled: false,
        pushStateEnabled: false,
        autoInitializePage: false
    });
});
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.1/jquery.mobile.min.js"></script>

JavaScript

$(function(){
    $('#moop').click(function(e){
        $('<div data-role="page" id="page_3" data-add-back-btn="true">').html('<div data-theme="a" data-role="header"><h1>HAzaaaa</h1></div>').appendTo($('body'));
        //$('#page_3').trigger('create');
        $('#page_2').trigger('create');
        $.mobile.changePage($('#arg'), {transition:"slide"});
    })
})


window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    didInsertElement: function(){
        console.log("foo");
//        $.mobile
        window.setTimeout(function(){
            $.mobile.initializePage();
        }, 500);
        
    }
});

App.IndexView = Em.View.extend({
    templateName: "index",
    didInsertElement: function () {
        console.log('inderted')
    }
})

App.Router.map(function() {
  this.route("about", { path: "/moop" });
    /*
  this.route("about", { path: "/about" });
  this.route("favorites", { path: "/favs" });
  */
});