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

Question

我有一个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

编辑 - 相关评论为用户创建/编辑

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/

相关文档