在 ember.js 的一个插座中呈现不同的模板

Question

我有一个 ember 应用程序，它允许您创建、编辑和删除用户以及查看用户列表。我按照教程（仍在学习 ember）制作了该应用程序，我的问题是所有 CRUD 页面都加载到不同的插座中。我想在应用程序{{outlet}} 中有一个用户列表，然后当我单击一个用户时，该用户的个人详细信息将显示在与列表相同的{{outlet}} 中。如果我单击编辑，我希望在{{outlet}} 中出现一个编辑表单，并且在保存时我希望{{outlet}} 再次呈现用户列表。谁能告诉我我会怎么做？或者建议一种更好的渲染方式？

这是我的router.js：

App.Router.map(function(){
  this.resource('users', function(){
    this.resource('user', { path:'/:user_id' }, function(){
      this.route('edit');
    });
    this.route('create');
  });
});

还有我的模板：

应用模板：

  <script type="text/x-handlebars" id="application">

//This is where I want everything to render

      {{outlet}}

  </script>

用户模板

<script type = "text/x-handlebars" id = "users">

{{#link-to "users.create"}}Create New User {{/link-to}}


 <ul class="list-group">        
        {{#each user in controller}}
            <li class="list-group-item">            
               {{#link-to "user" user}}                                                
                    {{user.firstName}} {{user.lastName}}
                {{/link-to}}

            </li>
        {{/each}}
    </ul> 
//This is where the individual agent currently gets rendered, but it looks terrible
{{outlet}}

</script>

个人用户模板

<script type = "text/x-handlebars" id = "user">
<div class="user-profile">
 {{#if deleteMode}}
            <div class="confirm-box">
                <h5>Really?</h5>
                <button {{action "confirmDelete"}}> yes </button>
                <button {{action "cancelDelete"}}> no </button>
            </div>
            {{/if}}

  <h4>Name: {{firstName}} {{lastName}}</h4>
  <h4>Email: {{email}}</h4>


  <button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
</div>


 //This is where the edit form gets rendered, again looking dreadful
{{outlet}}

</script>

编辑用户模板

<script type = "text/x-handlebars" id = "user/edit">


  <h5>First Name</h5>
  {{input value=firstName}}

  <h5>Last Name</h5>
  {{input value=lastName}}

  <h5>Email</h5>
  {{input value=email}}

<button {{action "save"}}> Save </button>

</script>

Answer 1

最好将路由的嵌套与模板/出口的嵌套相匹配，因为后者的呈现取决于路由的层次结构。因此，如果您想在相同的outlet 中渲染路由，即最初的application outlet，那么最好不要嵌套这些路由。

App.Router.map(function(){
  this.resource('users', function(){
    this.route('create');
  });
  this.resource('user', { path:'users/:user_id' }, function(){
      this.route('edit');
    });
});

http://emberjs.jsbin.com/oYiDIWe/1#/users

EDIT - 与用于用户创建/编辑的 cmets 相关

http://emberjs.jsbin.com/iBEBEso/1#/users

App.Router.map(function(){
  this.resource('users', function(){

  });
  this.resource('user', { path:'users/:user_id' }, function(){
      //this.route('edit');
    });
  this.route('users.create',{path:'users/create'});
  this.route('user.edit',{path:'users/:user_id/edit'});
});

http://emberjs.com/guides/routing/defining-your-routes/中的相关文档