ember.jsember-routerember-1

EmberJS "Building an App with Ember.js" error routing

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 ?

Solution

  • I just delete this line in index.hmtl:

    <script src="vendor/jquery/mobile/jquery.mobile-1.3.1.min.js"></script>

    and now it's working. I don't know what is the problem of compatibility but it's working this way.