ember.js - 如何在 ember 中为多个弹出窗口重用模态模板？

Question

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

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

我尝试使用 bool 变量值来确定在模态弹出窗口中显示哪些数据，但它不起作用。这是我尝试过的。我已经展示了下面的相关部分，可以找到完整的工作程序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 没有设置。

知道如何解决这个问题吗？非常感谢任何帮助!谢谢!

Answer 1

两个弹出窗口都显示“我的标题”，因为模板引用了 isFirst ApplicationController 的属性(property).要从 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/