ember.js - Ember.js：切换嵌套视图

Question

我有一个带有一些登录/注册表单的标题，当您单击相应的按钮时会弹出这些表单。

虽然仅使用 jQuery 就可以正常工作，但我现在已经开始将 Ember 集成到应用程序中，并且在使用一些简单的切换功能时遇到了一些麻烦。

这是基本的 HTML 标记：

<header>
  <h1>Page Title<h1>

  <nav>
    <a id="toggles-login" class="button {{active_class_binding}}">Login</a>
    <a id="toggles-signup" class="button {{active_class_binding}}">Signup</a>
  </nav>

  <div id="popup-forms">
    <div id="login-form"></div>
    <div id="signup-form"></div>
  </div>
<header>

我对 Ember 完全陌生，我真的不知道如何设置它。我唯一想要的是能够将弹出表单设置为Ember.View对象并使用一些action助手来切换它们。

我真的迷失了这个。

Answer 1

一个简单的解决方案是触发简单的操作来显示相应的表单：

<a id="toggles-login" class="button {{active_class_binding}}" {{action showLoginForm target="view"}}>Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}" {{action showSignupForm target="view"}}>Signup</a>

相应的视图必须实现这两个动作：

App.YourView = Ember.View.extend({
  showLoginForm : function(){
    this.$("#login-form").toggle();
  },
  showSignupForm : function(){
   this.$("#signup-form").toggle();
  }
});