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

Question

我在 ember 中使用引导模式对话框。 我将它渲染为来自控制器的视图。

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

我的问题是我想在第一个模板中执行某些操作时在此视图中显示另一个模板。例如，在 firstModalScreen 中选择某些内容会将您带到特定所选项目的详细信息，并且应该呈现 secondModalScreen。 这种行为就像从一条路线导航到另一条路线，但我想在模态对话框中实现这一点。最好的方法是什么？

我可以隐藏第一个模式，然后用另一个模板再次渲染它，但这会导致不必要的关闭和打开同一个对话框。

Answer 1

我最近正在开发一个类似的功能。我最终使用嵌入在模态视图内的 {{view}} 助手中的 Ember 的容器视图来解决它。你可以在http://emberjs.jsbin.com/ruzog/5/edit查看我的JSBIN，或者在https://*.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') 
});

Answer 2

您可以替换模态框内的内容。我之前通过简单地添加一个布尔值并让车把显示某些内容来完成此操作。如果您想显示超过 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>