{output}中模板之间的成员切换

Question

我正在构建我的第一个成员应用程序，其中有CRUD属性。我的index.html代码的一部分是这样的-

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

<table>
  {{#each setting in controller}}
    <tr>
 <td>
      <h2>{{setting.name}}</h2>
    </td>
    </tr>
    <tr>
    <td>{{#link-to "setting" setting}}More Details..{{/link-to}}</td>
    </tr>
  {{/each}}
</table>

{{outlet}}

</script>

<script type = "text/x-handlebars" id = "setting">
{{#if deleteMode}}
<div class="confirm-box">
  <h4>Really?</h4>
  <button {{action "confirmDelete"}}> yes </button>
  <button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}
<div class="col-xs-6">
<h4>{{name}}</h4>
<h4>{{address_line1}}</h4>
<h4>{{address_line2}}</h4>
<h4>{{address_city}}</h4>
<h4>{{address_state}}</h4>
<h4>{{address_zip}}</h4>
<h4>{{address_country}}</h4>

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

<div class = "col-xs-6">
{{outlet}}
</div>
</script>

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


<div class="input-group">
  <h5>Name:</h5>
  {{input value=name}}

   <h5>Address:</h5>
  {{input value=address_line1}}

  {{input value=address_line2}}

   <h5>City:</h5>
  {{input value=address_city}}

   <h5>State:</h5>
  {{input value=address_state}}

   <h5>ZIP:</h5>
  {{input value=address_zip}}

   <h5>Country:</h5>
  {{input value=address_country}}


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

</script>

当我单击setting模板中的setting按钮时，带有编辑表单的setting/edit模板将在setting模板的{outlet}中打开。我想知道如何让setting/edit模板替换settings模板的{outlet}中的setting模板，这样它们就不会出现在同一个页面上？新的余烬开发和有点混乱，任何帮助赞赏。

Answer 1

馀烬总是路线的叶子路线。当您在settingRoute上时(意味着只呈现设置模板)，实际上您的叶路径是settingIndexRoute，而在{outlet} of setting路由setting/index模板中，当它发现您没有指定索引模板时会生成setting/index模板。因此，当您单击“编辑”时，setting/edit将替换setting/index模板。因此，我建议您将setting模板的内容移动到setting/index中。