Question

我在ember中使用bootstrap模态对话框。我将它渲染为控制器的视图。

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

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

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

Answer 1

您可以替换模态中的内容。之前我已经完成了这个操作，只需添加一个布尔值并让把手显示某些内容。如果要显示超过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>

Answer 2

我最近正在研究类似的功能。我最终使用嵌套在模态视图中的{{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') 
});

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

2 个答案: