2013-12-10 44 views
0

我正在構建我的第一個具有CRUD屬性的應用程序。我的index.html的代碼部分看起來像這 -Ember在{output}模板之間切換

<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模板點擊edit按鈕時,setting/edit模板與編輯表單中setting模板的{outlet}打開。我想知道如何讓setting/edit模板取代settings模板的{outlet}中的setting模板,以便它們不出現在同一頁面上?呃開發新的和有點困惑,任何幫助表示讚賞。

回答

1

Ember總是路線到葉子路線。當你在settingRoute(意味着只有設置模板被渲染),實際上你的葉子路徑是settingIndexRoute{outlet} 路由setting/index模板被渲染,當它發現你沒有指定索引模板時由ember生成。所以當你點擊編輯時,setting/edit將取代setting/index模板。所以我建議您將setting模板的內容移動到setting/index