ember.js - 如何加载自定义路由模板?

时间:2014-05-24 19:57:14

标签: javascript ember.js

在我的下面的代码中,我试图加载'home'路由模板作为我的索引路径?

我该怎么做?转到mysite.com然后只能加载主路由模板?

我不想看到应用程序模板并使用其{{outlet}}。

感谢您的帮助

var App = Ember.Application.create();

App.Router.map(function(){

    this.resource('home', {path: ''} );
    //this.resource('home', {path: '/h'} );
    this.resource('about', {path: '/a'} );
    this.resource('contact', {path: '/c'} );
});

App.ApplicationRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('contact'); 
    }
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
   this.transitionTo('home'); 
  }
});

App.HomeRoute = Ember.Route.extend({

});

App.AboutRoute = Ember.Route.extend({

});

App.ContactRoute = Ember.Route.extend({

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/attempt1.js"></script>


<script type="text/x-handlebars">
   <div>
     page - Application
   </div>

   {{outlet}}
 </script>

<script type="text/x-handlebars" id="home">
  <div>
    page - Home
  </div>
</script>

<script type="text/x-handlebars" id="about">
  <div>
    page - About
  </div>
</script>

<script type="text/x-handlebars" id="contact">
  <div>
    page - Contact
  </div>
</script>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

更改data-template-name的ID:

<script type="text/x-handlebars" data-template-name="home">
  <div>
    page - Home
  </div>
</script>
相关问题