Question

我正在构建我的第一个具有CRUD属性的ember应用程序。我的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>

当我点击edit模板中的setting按钮时，带有修改表单的setting/edit模板会在{outlet}模板的setting中打开。我想知道如何获取setting/edit模板来替换setting模板settings中的{outlet}模板，以便它们不会出现在同一页面上？新的ember开发和有点困惑，任何帮助赞赏。

Answer 1

Ember始终路由到叶子路线。当您在settingRoute上时（意味着只渲染设置模板）实际上您的叶子路线为settingIndexRoute并且在{outlet} setting路线setting/index模板中呈现，当发现你没有指定索引模板时由ember生成。因此，当您点击修改时，setting/edit将替换setting/index模板。所以我建议您在setting中移动setting/index模板的内容。

{output}中模板之间的灰色切换

1 个答案: