ember.js 如何在Ember中的选定字段中显示网站上的路线内容

oknwwptz  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(143)

我正在Ember做一个小项目,我真的很新。我有一个Ember应用程序与主页/路线。
Main pic
我想要的是,如果我点击“关于”等,该路线的内容(一些文本,图片,无论什么)将显示在页面上的左列,让我们说,或其他任何地方,我希望它在页面上。
到目前为止,我所尝试的一切都是让内容出现在页脚下面。我尝试在about.hbs中这样做,以为如果我用指定内容的位置(这就是index.html文件中页面的划分方式),它就可以工作。但没有,它所做的只是在页脚下面创建一个相同的左列。

{{page-title "About"}}
<div class = "container">
    <div class = "left-col">
        <p>hello</p>
    </div>
</div>
{{outlet}}

任何帮助都将不胜感激!

ep6jt1vc

ep6jt1vc1#

Ember使用树进行路由。application路由是树的根。所有其他路由都是application路由的子路由。
路由注册在app/router.js中。application路由未显式注册。
如果路由至少有一个子路由,则会自动创建index路由。
让我们从official Ember tutorial的例子来说明:

import EmberRouter from '@ember/routing/router';
import config from 'super-rentals/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('about');
});

它注册了一个about路由,就像您尝试的那样。这将创建以下路由树:

  • 应用程序
  • 索引
  • 关于

子路由在其父路由的{{outlet}}内呈现。
让我们再举一个例子。让我们假设你创建了这三个模板:
第一个
如果用户访问索引路由,则将呈现以下HTML标记:

<div class="container">
  <p>Landing page</p>
</div>

如果用户访问about路由,则将呈现以下HTML:

<div class="container">
  <p>About me</p>
</div>

请在Ember官方指南的routing chapter中找到更多相关信息。

相关问题