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

请容忍我，这个问题很粗糙。我是Ember js的新手，在视图、控制器、模板和路由之间有很多混淆。我有一个基本要求，就是在左边有一个菜单，上面有

用户

，

组织

。中间有一个div，现在，当我点击users时，我已经给出了一个指向

/users

路由的链接。对于组织

/organizations

路由，它是一个不同的模板。我想在居中的分区中显示它们。不知道如何显示。我认为这与孩子的观点有关，但一开始我就麻木了。我只需要在如何实现这一点的工作流程中得到帮助

编辑：

这是基本代码，我有一个名为

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

---

当用户单击用户链接时，我希望用户模板显示在

主容器中

div.organizations template，否则。

通常情况下，您会按照您描述的路线进行操作。这是您的

应用程序.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>

{{link to'users}}

将进入用户路由，调用所有挂钩，如果控制器不存在，则创建控制器，在控制器上设置模型，并将

users.hbs

模板呈现到应用程序模板的出口。您正在描述的

home.hbs

应重命名为

index.hbs

，因为默认情况下，当访问

/

时（或无论您的基本url是什么），Ember会将您的

index.hbs

模板呈现到插座中。当然，可以将不同的模板设为默认模板，但这会涉及更多代码，因此只需将您的

home.hbs

更改为

index.hbs

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

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

如果这些路线确实嵌套在您的主路线下方。您到的链接需要更改为

{{#链接到'home.organizations'}

如果您不这样嵌套，那么

{{{{链接到'users'}}

将把

users.hbs

文件呈现到应用程序的出口中。这就是恩伯和路由器的工作原理

---

如果由于某种原因无法嵌套，则将

链接更改为
操作
，使
{outlet}
成为一个命名的出口，如
{outlet'named'}
，并在
routes/home.js
操作哈希中，将
this.renderTemplate（）
的操作放入命名出口。查看api以了解具体的操作方法
您可以给DIV一个ID，并使用JavaScript设置innerHTML。@durbnPoisin:这是我在点击用户链接“Ember.$（“#dashboard widgets container”）.innerHTML=“users”`但它似乎什么也没做，没有文本“用户”被打印出来div@Inquisitive如果您必须像这里这样使用jquery，那么您完全没有理解Ember的要点，根本没有使用框架。阅读>@sunrize920是的，我就是这么说的，我阅读了这些概念，但对DOM是如何呈现的感到非常困惑。我有一个不同的应用程序模板，带有页眉和页脚，这是主仪表板页面。其他页面如登录等，我无法将其重命名为索引hbs。因此，您需要使用户和组织成为主路由的嵌套路由。明白了，这就是我需要的，thnx。在回答中使用此注释尝试使用第二种方法，render只渲染模板，如果用户模板有一个显示所有用户名称的调用，则它在模型中获取了该名称，但不打印任何内容，除了普通模板
this.resource('home', function(){
      this.route('organizations');
      this.route('users');
  });