Question

我是ember和javascript的新手。我设计了一个主页（application.hbs）。现在在application.hbs中有一个选项（关于我们），它应该重定向到关于我们的页面（全新）。我该怎么办？完全离开主页，转到我们左右的页面。现在它正在主页（application.hbs）下面显示关于我们页面的内容。

application.hbs（code snippet）

<section id = "FollowUs">
  <div class = "follow container-fluid">
    <div class="row section_blurb"> 
     <div class="col-xs-12 col-sm-4">
        <h1>example</h1>
        <a href ="#terms"><p>Home</p></a>
        <a href ="#terms"><p>Contact</p></a>
        <p>{{#link-to "aboutus"}}About Us{{/link-to}}</p>
      </div>
      <div class="col-xs-12 col-sm-4">
        <h1>Dolor Sit Amet </h1>
        <a href ="#terms"><p>Term & Conditions</p></a>
        <a href ="#privacy"><p>Privacy Policy</p></a>
        <a href ="#terms"><p>Lorem Ipsum</p></a>
      </div>
      <div class="col-xs-12 col-sm-4">
        <h1>Contact</h1>
        <p>99999999999</p>
        <a href ="#privacy"><p>hello@gmail.com</p></a>  
      </div>
      <div class="col-sm-6">
        <h1>Follow Us</h1>
        <div class = "row">
          <div class="col-xs-4 col-sm-2 col-sm-offset-2">
            <a href = "https://www.facebook.com/"> 
               <img src="images/ic_facebook yellow.svg" class="img-responsive"></a>
          </div>
          <div class="col-xs-4 col-sm-2 col-sm-offset-2">  
            <a href = "https://twitter.com/">
               <img src="images/ic_twitter yellow.svg" class ="img-responsive"></a>  
          </div>
          <div class="col-xs-4 col-sm-2 col-sm-offset-2">      
            <a href = "">
               <img src="../images/ic_google plus yellow.svg" class="img-responsive"></a>
          </div>
          <div class="col-xs-4 col-sm-2 col-sm-offset-2">     
            <a href = "#facebook">
               <img src="../images/ic_instagram yellow.svg" class="img-responsive"></a>
          </div>   
      </div>     
      </div>
      </div>
    </div>
</section>

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route("aboutus");
});

export default Router;

aboutus.hbs

<p>hello</p>
{{outlet}}

Answer 1

Maruti，您需要将application.hbs模板的大部分内容移至index.hbs模板，仅保留application.hbs中的导航。

outlet {{outlet}}是导航到应用程序根目录时ember将呈现index.hbs的地方。然后，当您导航到aboutus路线时，我们会移除index.hbs模板并将其替换为aboutus.hbs模板。

如何呈现一个完整的新模板并将应用程序模板保留在ember中

1 个答案: