title: ember.js how to popup a modal from a controller
body: <p>I successfully use this code from a route to popup a boostrap model:</p>
  
  <pre><code>this.render("login-modal", {
    into: 'application',
    outlet: 'modal'
  });
  </code></pre>
  
  <p>I have login template and the actions is handle through a controller. What I want to do is to pop the modal if the login is failed through the controller.</p>
  
  <p>LoginController:</p>
  
  <pre><code>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.");
      }
    });
   }
  }
  </code></pre>
  
  <p>this is the failed code:</p>
  
  <pre><code>if (response.message) {
    //console.log('login failed');
    self.get('login').render("login-modal-failed", {
        into: 'application',
        outlet: 'modal'
    });
  }
  </code></pre>
  
  <p>the error: <strong>Uncaught TypeError: Cannot read property 'render' of undefined</strong> </p>
  
  <p>The Login template</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="login"&gt;
    &lt;h1&gt;LOGIN&lt;/h1&gt;
    &lt;p&gt;Please enter login info&lt;/p&gt;
  
    &lt;form class="form-inline" role="form" {{action 'submit' on="submit"}}&gt;
      &lt;div class="form-group"&gt;
        {{input type="text" class="form-control" placeholder="Username" value=username}}
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        {{input type="password" class="form-control" placeholder="Password" value=password}}
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    {{#if errorMessage}}
      &lt;br /&gt;
      &lt;div class="alert alert-warning alert-dismissible" role="alert"&gt;
        &lt;button type="button" class="close" data-dismiss="alert"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
        &lt;strong&gt;Warning!&lt;/strong&gt; Wrong username and/or password.
      &lt;/div&gt;
    {{/if}}
  &lt;/script&gt;
  </code></pre>
  
  <p>The bootstrap modal component</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="components/my-modal"&gt;
    &lt;div class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h4 class="modal-title"&gt;{{title}}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            {{yield}}
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-primary" {{action 'ok'}}&gt;OK&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The bootstrap modal template based on the component above</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="login-modal-failed"&gt;
    {{#my-modal title='Login Failed' ok='failed'}}
      Login failed - wrong username/password!
    {{/my-modal}}
  &lt;/script&gt;
  </code></pre>