Ember & Jquery Mobile

by amindunited

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<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">
    <!-- we'll create each jQuery Mobile 'page'-->
    <div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content content-secondary">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="a" data-icon="search">
                        Search
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="a" data-icon="bars">
                        Browse
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="a" data-icon="grid">
                        Remote
                    </a>
                </li>
            </ul>
        </div>
        <form action="">
            <div data-role="fieldcontain">
                <label for="searchinput1">
                    Search for:
                </label>
                <input name="" id="searchinput1" placeholder="" value="" type="search"
                data-mini="true">
            </div>
            <div data-role="fieldcontain">
                <label for="selectmenu5">
                    In:
                </label>
                <select id="selectmenu5" name="" data-theme="a" data-mini="true">
                    <option value="option1">
                        Film
                    </option>
                    <option value="value">
                        Television
                    </option>
...

CSS

/* fluid images moved from jquery.mobile.core.css*/
.ui-mobile img {
	max-width: 100%;
}

.ui-header .jqm-home { top: 0; }
nav { margin: 0; }

p.intro {
	font-size: .96em;
	line-height: 1.3;
	border-top: 1px solid #75ae18;
	border-bottom: 0;
	background: none;
	margin: 1.5em 0;
	padding: 1.5em 15px 0;
}
p.intro strong {
	color:  #558e08;
}

.type-interior .content-secondary {
	border-right: 0;
	border-left: 0;
	margin: 10px -15px 0;
	background: #fff;
	border-top: 1px solid #ccc;
}
.type-home .ui-content {
	margin-top: 5px;
	overflow: hidden;
	position: relative;
}
.type-interior .ui-content {
	padding-bottom: 0;
}
.content-secondary .ui-collapsible {
	padding: 10px 15px;
}
.content-secondary .ui-collapsible-inset {
	margin: 0;
}
.content-secondary .ui-collapsible-content {
	padding: 0;
	background: none;
}
.content-secondary .ui-listview {
	margin: 0;
}

/* docs site layout */

@media all and (min-width: 650px){
	
	.type-home .ui-content {
		margin-top: 5px;
	}
	.ui-mobile #jqm-homeheader {
		max-width: 340px;
	}
	p.intro {
		margin: 2em 0;
	}
	.type-home .ui-content,
	.type-interior > .ui-content {
		padding: 0;
	}
	.type-interior > .ui-content {
		overflow: hidden;
	}
	.content-secondary {
		text-align: left;
		float: left;
		width: 45%;
	}
	.content-secondary,
	.type-interior .content-secondary {
		margin: 30px 0 20px 2%;
		padding: 20px 4% 0 0;
		background: none;
		border-top: none;
		position: relative;
	}
	.type-interior .content-secondary::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		height: 1px;
		width: 1px;
		margin-bottom: -9999px;
		padding-bottom: 9999px;
		background: #bbb;
	}
	.type-index .content-secondary {
		padding: 0;
	}
	.content-secondary .ui-collapsible {
		margin: 0;
		padding: 0;
	}
	.content-secondary .ui-collapsible-content {
		border-left: none;
		border-right: none;
	}
	.type-index .content-secondary .ui-listview {
		margin: 0;
	}
	.ui-mobile #jqm-homeheader {
		padding:...

JavaScript

$(function(){
    var metaTags = "";
        metaTags += '<meta charset="utf-8">';
        metaTags += '\n';
        metaTags += '<meta name="viewport" content="initial-scale=1.0, user-scalable=no">';
        metaTags += '\n';
        metaTags += '<meta name="apple-mobile-web-app-capable" content="yes">';
        metaTags += '\n';
        metaTags += '<meta name="apple-mobile-web-app-status-bar-style" content="black">';
        metaTags += '\n';
        $(metaTags).insertAfter( $('head title') );
});
$(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"});
        $.mobile.changePage($('#page_2'), {transition:"slide"});
        //$('#page_2').trigger('create');
    })
})


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" });
  */
});