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

how to render a complete new template and leave the application template in ember

本文关键字：应用程序 保留 ember 新模板 何呈现 一个      更新时间：2023-09-26

我是ember和javascript的新手。我设计了一个主页（application.hbs）。现在application.hbs中有一个选项（About us），应该重定向到About us页面（全新）。我应该如何完全离开主页，转到About us页。现在它正在主页下面显示关于我们页面的内容（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>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;

关于我们.hbs

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

Maruti，您将希望将application.hbs模板的大部分内容移动到index.hbs模板，只保留application.hbs中的导航。

当您导航到应用程序的根目录时，出口{{outlet}}是ember渲染index.hbs的地方。然后，当您导航到aboutus路由时，成员将删除index.hbs模板并将其替换为aboutus.hbs模板。

相关文章：