javascript - 在 ember.js 的一个 socket 中渲染不同的模板

Question

我有一个 ember 应用程序，允许您创建、编辑和删除用户以及查看用户列表。我按照教程(仍在学习 ember)制作了该应用程序，我的问题是所有 CRUD 页面都加载在不同的 channel 中。我希望在应用程序 {{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(即初始应用程序导出)中渲染路由，那么最好不要嵌套这些路由。

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/中的相关文档