I use EmberJS 1.0.0 RC3.
Those files are based on this tutorial: http://www.youtube.com/watch?feature=player_embedded&v=Ga99hMi7wfY#! (from emberjs.com/guides/).
My index.html is:
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="app/Ressources/public/css/normalize-2.1.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/bootstrap-2.3.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/bootstrap-responsive-2.3.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/jquery.mobile.structure-1.3.1.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="app/Ressources/public/css/style.css">
</head>
<body>
<script type="text/x-handlebars" >
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Bloggr</a>
<ul class="nav">
<li><a href="#">Posts</a></li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="about">
<div class="about">
<p>Test</p>
</div>
</script>
<script src="vendor/jquery/jquery-2.0.0.min.js"></script>
<script src="vendor/jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
<script src="vendor/handlebars/handlebars-1.0.0-rc.3.js"></script>
<script src="vendor/ember/ember-1.0.0-rc.3.min.js"></script>
<script src="vendor/ember/ember-data-12.js"></script>
<script src="vendor/bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="vendor/moment/moment-2.0.0.min.js"></script>
<script src="app/main2.js"></script>
</body>
</html>
My main2.js file is:
var App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
});
When I am in : my_app.local/index.html, it's working fine, I could see my menu. The link in About is my_app.local/index.html#/about so it's correct.
However, when I click on it, I go to my_app_client.local/about and the server cannot find this file (it's correct it doesn't find it, by the way only index.html exist).
In this example, I used WAMP with vhost. I tried with file://My_path_to_my_app/index.html, I could go to index.html#/about but chrome didn't find it.
Could you guess where is my error ?
I just delete this line in index.hmtl:
and now it's working. I don't know what is the problem of compatibility but it's working this way.