ember.js如何从控制器弹出一个模态

Question

我成功地使用此路线中的代码来弹出一个boostrap模型：

this.render("login-modal", {
  into: 'application',
  outlet: 'modal'
});

我有登录模板，操作通过控制器处理。我想要做的是如果通过控制器登录失败，则弹出模态。

的LoginController：

App.LoginController = Ember.Controller.extend({
  needs: ['application'],

  actions: {
  submit: function() {
  var username = this.get('username');
  var password = this.get('password');
  var self = this;

  var postData = JSON.stringify({
    "username": username,
    "password": password
  });

  self.set('errorMessage', null);

  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: 'api/auth',
    dataType: "json",
    data: postData,
    success: function(response){
      self.set('errorMessage', response.message);

      if (response.success) {

        self.set('token', response.token);
        self.set('loginstatus', 'success');

        var appController = self.get('controllers.application');
        appController.set('token', response.token);

        self.transitionToRoute('/');
      }

      if (response.message) {
          //console.log('login failed');
          self.get('login').render("login-modal-failed", {
          into: 'application',
          outlet: 'modal'
        });
      }
    },
    error: function() {
      alert("An error occurred while processing JSON file.");
    }
  });
 }
}

这是失败的代码：

if (response.message) {
  //console.log('login failed');
  self.get('login').render("login-modal-failed", {
      into: 'application',
      outlet: 'modal'
  });
}

错误：未捕获的TypeError：无法读取属性＆＃39;渲染＆＃39;未定义的

登录模板

<script type="text/x-handlebars" data-template-name="login">
  <h1>LOGIN</h1>
  <p>Please enter login info</p>

  <form class="form-inline" role="form" {{action 'submit' on="submit"}}>
    <div class="form-group">
      {{input type="text" class="form-control" placeholder="Username" value=username}}
    </div>
    <div class="form-group">
      {{input type="password" class="form-control" placeholder="Password" value=password}}
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  {{#if errorMessage}}
    <br />
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <strong>Warning!</strong> Wrong username and/or password.
    </div>
  {{/if}}
</script>

引导模态组件

<script type="text/x-handlebars" data-template-name="components/my-modal">
  <div class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body">
          {{yield}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" {{action 'ok'}}>OK</button>
        </div>
      </div>
    </div>
  </div>
</script>

基于上面组件的bootstrap模态模板

<script type="text/x-handlebars" data-template-name="login-modal-failed">
  {{#my-modal title='Login Failed' ok='failed'}}
    Login failed - wrong username/password!
  {{/my-modal}}
</script>