如何根据菜单中选择的内容更改 div 的内容

Question

请耐心等待，这个问题很粗糙。我是 Ember js 的新手，并且在视图控制器模板路由之间有很多混淆。我有这个基本要求，要在左侧有一个菜单，其中包含项目 users、organizations。和中心的 div，截至目前，当我单击用户时，我已经给出了 link 到 /users 的路线。对于组织 /organizations 路线，这是一个不同的模板。我想在居中显示它们 div。不知道该怎么做。我认为这与 child 观看次数有关，但一开始发现自己麻木了。我只需要有关如何实现此目标的工作流程方面的帮助。

编辑:

这是基本代码，我有一个名为 home 的页面。模板 home.hbs:

<ul class="nav nav-list">
        <li>
            {{#link-to 'users'}} Users{{/link-to}}
        </li>
        <li>
            {{#link-to 'organizations'}} Organizations {{/link-to}}
        </li>
</ul>

<div class="summary-width span10" id="home-container">
</div>

同样还有users.hbs和organization.hbs。

当用户点击用户 link 时，我希望用户模板显示在 home-container div 中。否则为组织模板。

Answer 1

通常，您会按照路线描述的方式进行操作。这是您的 application.hbs 即与应用程序路由和控制器关联的模板。

<ul class="nav nav-list">
        <li>
            {{#link-to 'users'}} Users{{/link-to}}
        </li>
        <li>
            {{#link-to 'organizations'}} Organizations {{/link-to}}
        </li>
</ul>

<div class="summary-width span10" id="home-container">
{{outlet}}
</div>

您将拥有一个路由器：

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

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

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

export default Router;

{{link-to 'users'}} 会进入用户路由，调用所有的钩子，创建控制器（如果控制器不存在），在控制器上设置模型，并将 users.hbs 模板渲染到应用程序模板的出口。您所描述的 home.hbs 应该重命名为 index.hbs 因为默认情况下 Ember 在 / 被访问时将您的 index.hbs 模板渲染到插座中（或任何您的基础url 是）。当然，可以将不同的模板设置为默认模板，但这涉及更多代码，因此只需将 home.hbs 更改为 index.hbs

编辑：将此添加到您的路由器：

this.resource('home', function(){
      this.route('organizations');
      this.route('users');
  });

如果这些路线确实嵌套在您的家庭路线下方。您的 link 收件人需要更改为 {{#link-to 'home.organizations'}}

如果您不这样嵌套，那么 {{#link-to 'users'}} 会将 users.hbs 文件呈现到应用程序的出口中。 Ember 和路由器就是这样工作的。

如果由于某种原因不能嵌套，则将 link-to 更改为 actions，使 {{outlet}} 成为像 {{outlet 'named'}} 一样的命名插座，并在您的 routes/home.js actions 散列，使 this.renderTemplate() 的动作进入指定的出口。查看 api 以了解具体操作方法

如何根据菜单中选择的内容更改 div 的内容

How to change the content of div on the basis of what is selected in the menu

javascript

ember.js

ember-cli