Cacher is the code snippet organizer for pro developers

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}

<h4>The current name is: {{model.name}}</h4>
    {{outlet}}
    {{outlet 'modal'}}
<button {{action 'openModal' 'modal' model}}>Change Name</button>

{{#modal-dialog action="close"}}
  <h3 class="flush--top">Name Change Modal</h3>
  <p>Enter a new name:</p>
  <p>{{input value=name}}</p>
  <button {{action "close"}}>Done</button>
{{/modal-dialog}}

<div class="overlay" {{action "close"}}> </div>
<div class="modal">
  {{yield}}
</div>

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{outlet 'modal'}}
<br>
<br>

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

/* Put your CSS here */
html, body {
  margin: 20px;
}

* {
  box-sizing: border-box;
}

.modal {
  position: relative;
  margin: 10px auto;
  width: 300px;
  background-color: #fff;
  padding: 1em;
}

input {
  width: 100%;
}

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.flush--top {
  margin-top: 0;  
}

import Ember from 'ember';

export default Ember.Route.extend({
});

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Em.Object.create({name: 'Mitch'});
  }
});

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
    openModal: function(modalName, model) {
      this.controllerFor(modalName).set('model', model);
      return this.render(modalName, {
        into: 'application',
        outlet: 'modal'
      });
    },
    
    closeModal: function() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
  this.route('one');
});

export default Router;

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    close: function() {
      return this.send('closeModal');
    }
  }
});

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    close: function() {
      return this.sendAction();
    }
  }
});