2015-11-24 53 views
1

應用程序模板我是新來的餘燼和javascript.I設計了一個網頁(application.hbs)。現在有一個選項(關於我們)這應該重定向到關於我們的頁面(全新的)。我應該如何完全離開主頁並轉到關於我們的頁面。現在它正在主頁(application.hbs)下面顯示關於我們頁面的內容。如何呈現一個完整的新模板,並在application.hbs離開燼

application.hbs(代碼段)

<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>[email protected]</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}} 

回答

2

馬魯蒂,你會想要將大部分的內容application.hbs template.html保留僅在application.hbs中導航的index.hbs模板。

outlet{{outlet}}是當您導航到應用程序根目錄時,ember將呈現index.hbs。然後,當你瀏覽到aboutus路線餘燼將刪除index.hbs模板,並與aboutus.hbs模板替換它。