在單個模式對話框中顯示多個模板

我在使用引導模式對話框中的燼。我將其渲染爲控制器的視圖。在單個模式對話框中顯示多個模板

this.set("modalView", app.AddModalView.create({ 
controller: this, 
templateName: "firstModalScreen" 
})); 
this.get("modalView").append();

我的問題是，我想在此視圖中顯示另一個模板，在此第一個模板中的某些操作。例如，在firstModalScreen中選擇某些內容會引導您查看所選項目的細節，並應呈現secondModalScreen。行爲就像從一條路線導航到另一條路線，但我想在模態對話框中實現此目的。做這個的最好方式是什麼？

我可以隱藏第一個模態，然後再次使用另一個模板渲染它，但會導致不必要的關閉和打開相同的對話框。

來源

2014-02-20 mns

有沒有你不燼基本路線這樣做的一個原因？這樣做有困難嗎？ – gravityplanx

那麼，這個工作流程是另一個工作流程的先決條件，所以如果它的模式對話框比普通頁面更好，那麼它將提供更好的UI體驗。 – mns

Ember路線可以在模態內... – gravityplanx

我最近在研究類似的功能。我最終使用嵌套在模式視圖內的{{view}}助手中的Ember的Container View來解決這個問題。您可以在http://emberjs.jsbin.com/ruzog/5/edit檢查出我JSBIN，或https://stackoverflow.com/questions/21733148/swapping-a-child-template-within-a-modal

編輯全絮絮叨叨：

更新過的例子：http://emberjs.jsbin.com/ruzog/6/edit

這裏是代碼的關鍵位。容器視圖觀察共享上下文中的屬性。當用戶活動改變模型的狀態時，容器視圖將用新的模板/視圖/控制器動態更新其內容。

App.ChildContainerView = Ember.ContainerView.extend({ 
    classNames: ['child-div'], 
    didInsertElement: function() { 
    this.updateContent(); 
    }, 

    updateContent: function() { 
    console.log('Update content'); 
    this.removeObject(this.get('childViews')[0]); 
    if(this.get("context.name") == "Jimi"){ 
     this.pushObject(App.ModalChildView.create());  
    } else { 
     this.pushObject(App.AlternateChildView.create()); 
    } 
    }.observes('context.name') 
});

來源

2014-02-20 18:21:23 pjfingers

在你的例子中，當模態對話框打開時，你不會動態地改變內容，當對話框剩餘時我需要改變內容（整個佈局）打開 – mns

在JSBin中這是真的，我只是試圖以最簡單/最清晰的方式佈置構建塊。在我的實際功能實現中，我使用相同的技術創建了一個模式視圖，其中有一個目錄留在一個面板中，根據哪個項目被選中，右邊的'內容'區域將在線更新。如果今天下午有機會，我會嘗試更新JSBin。 – pjfingers

感謝您的回答@pjfingers。更新後的JSBin是我所需要的，但是我設法讓它在沒有嵌套視圖的情況下工作，因爲我正在替換整個屏幕，而不僅僅是部分，我會接受你的因爲它服務於此目的。 – mns

您可以替換模態內的內容。我之前通過簡單地添加一個布爾值並且具有句柄來顯示特定的內容。如果你想顯示2米以上的屏幕，你可能必須使用一個號碼和擴展可以使用switch語句來測試不同值的車把函數來顯示不同的內容

<script type="text/x-handlebars" data-template-name='modal-popup'> 
<div id="popup" class="modal fade unselectable" style="display:none;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       Modal Title 
      </div> 
      <span class="unselectable"> 
       <!-- User input (Part that changes)--> 
       {{partial "_data-entry"}} 

      </span> 
      <div id="footer"> 
       {{!Code for footer}} 
      </div> 
     </div> 
    </div> 
</div>

<script type="text/x-handlebars" data-template-name='_data-entry'> 
    {{#if editingMode}} 
    {{!Show editing mode content}} 
    {{else}} 
    {{!Show other stuff}} 
    {{#if}} 
</script>

來源

2014-02-20 16:15:14 Jaime

當涉及很多操作時，這種方法看起來很麻煩:( – mns

在單個模式對話框中顯示多個模板

回答

相關問題