Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Master your modals with Ember.js</title>
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
    <script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
​
    <script type="text/x-handlebars">
      <h2>Master your modals with Ember.js</h2>
      {{outlet}}
      {{outlet 'modal'}}
    </script>
​
    <script type="text/x-handlebars" data-template-name="index">
      <p><strong>Name:</strong> {{name}}</p>
      <button {{action 'showModal' 'settings-modal' model}}>settings</button>
      <button {{action 'showModal' 'logout-modal'}}>logout</button>
    </script>
​
    <script type="text/x-handlebars" data-template-name="settings-modal">
      {{#my-modal title='Settings' ok='save' close='removeModal'}}
        <form {{action 'ok' on='submit' target=view}}>
          <div class="form-group">
            <label>Name</label>
            {{input class="form-control" value=name}}
          </div>
        </form>
      {{/my-modal}}
    </script>
​
    <script type="text/x-handlebars" data-template-name="logout-modal">
      {{#my-modal title='Logout' ok='logout' close='removeModal'}}
        Are you sure you want to logout?
      {{/my-modal}}
    </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">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
              {{yield}}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" {{action 'ok'}}>OK</button>
            </div>
          </div>
        </div>
      </div>
    </script>
    
  </body>
</html>
​
 
/* Put your CSS here */
html, body {
    margin: 20px;
}
 
App = Ember.Application.create();
​
App.Router.map(function() {
});
​
/*
 * ApplicationRoute
 */
App.ApplicationRoute = Ember.Route.extend({
  actions: {
    showModal: function(name, model) {
      this.render(name, {
        into: 'application',
        outlet: 'modal',
        model: model
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});
​
/*
 * IndexRoute
 */
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.Object.create({ name: 'My name' });
  }
});
​
/*
 * SettingsModalController
 */
App.SettingsModalController = Ember.ObjectController.extend({
  actions: {
    save: function() {
      // save to server
    }
  }
});
​
/*
 * LogoutModalController
 */
App.LogoutModalController = Ember.Controller.extend({
  actions: {
    logout: function() {
      alert('logout');
    }
  }
});
​
/*
 * MyModalComponent
 */
App.MyModalComponent = Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
    }
  },
  show: function() {
    this.$('.modal').modal().on('hidden.bs.modal', function() {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers