如何在 ember 中为多个弹出窗口重用模式模板？答案

【问题标题】：How can I reuse modal template in ember for multiple popups?如何在 ember 中为多个弹出窗口重用模式模板？
【发布时间】：2013-09-03 19:00:20
【问题描述】：

我发现这个stackoverflow link 非常有用，它展示了如何创建模态模板。这是他们在那个问题中所指的code。

我想扩展这个程序并创建两个显示不同内容的模式弹出窗口。但是，我不确定如何执行此操作。

我尝试使用布尔变量值来确定要在模式弹出窗口中显示哪些数据，但它不起作用。这是我尝试过的。我在下面展示了相关部分，完整的工作程序可以在here 找到。

App.ApplicationRoute = Ember.Route.extend({

  isFirst : false,

  events: {
     open: function() {
           isFirst = true;
           this.render('modal', { into: 'application', outlet: 'modal' });
     },

     openModal: function() {
           isFirst = false;
          this.render('modal', { into: 'application',     outlet: 'modal' });
     },
});

<div class="modal-header">
  <button type="button" class="close" {{action close target="view"}}>&times;</button>

  {{#if isFirst}}
  <h3>Modal header</h3>
  {{else}}
    My Header
  {{/if}}

</div>

两个弹出窗口都显示“我的标题”作为标题，这意味着变量 isFirst 没有设置。

知道如何解决这个问题吗？任何帮助是极大的赞赏！谢谢！

【问题讨论】：

标签： ember.js popup modal-dialog

【解决方案1】：

两个弹出窗口都显示“我的标题”，因为模板引用了 ApplicationController 的 isFirst 属性。要从 ApplicationRoute 中的事件设置该属性，请尝试以下操作：

open: function() {
  this.controller.set('isFirst', true);
  this.render('modal', { into: 'application', outlet: 'modal' });
},

openModal: function(arg) {
  this.controller.set('isFirst', false);
  this.render('modal', { into: 'application',     outlet: 'modal' });
},

在这里工作 jsbin：http://jsbin.com/OTiRerA/1/

【讨论】：