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/

中的相关文档

在ember.js中的一个插座中渲染不同的模板

1 个答案: