在单个模式对话框中显示多个模板

我在使用引导模式对话框中的烬。我将其渲染为控制器的视图。在单个模式对话框中显示多个模板

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

在单个模式对话框中显示多个模板

回答

相关问题