gogogarrett · October 14, 2015 04:08 · gogogarrett · Oct 14, 2015
diff --git a/application.controller.js b/application.controller.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName:'Ember Twiddle'
 });
diff --git a/application.template.hbs b/application.template.hbs
 <h1>Welcome to {{appName}}</h1>
 <br>
 <br>
 {{outlet}}
 {{#link-to 'contacts'}}Contacts{{/link-to}}
 <br>
 <br>
diff --git a/compiled_css.css b/compiled_css.css
 .contact-bio-7305e53c {
  padding: 5px;
  border: 1px solid blue; }
  .contact-bio-7305e53c p {
    color: blue; }

 .contact-box-8e39ccec {
  padding: 5px;
  border: 1px solid red; }
  .contact-box-8e39ccec p {
    color: red; } # because this after contact-bio p .. these styles take over! :'(

 .contact-name-77d9f840 {
  padding: 5px;
  border: 1px solid green; }
  .contact-name-77d9f840 p {
    color: green; }

 /*# sourceMappingURL=sass-pods-example.css.map */
diff --git a/contact-bio.component.js b/contact-bio.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/contact-bio.styles.scss b/contact-bio.styles.scss
 & {
  padding: 5px;
  border: 1px solid green;

  p { color: green; }
 }
diff --git a/contact-bio.template.hbs b/contact-bio.template.hbs
 <p>
  {{bio}}
 </p>
diff --git a/contact-box.component.js b/contact-box.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/contact-box.styles.scss b/contact-box.styles.scss
 & {
  padding: 5px;
  border: 1px solid red;


 }

 p { color: red; }
diff --git a/contact-box.template.hbs b/contact-box.template.hbs
 <p>Contact Box</p>
 {{contact-name name=contact.name}}
 {{contact-bio bio=contact.bio}}
diff --git a/contact-name.component.js b/contact-name.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/contact-name.styles.scss b/contact-name.styles.scss
 & {
  padding: 5px;
  border: 1px solid green;

  p { color: green; }
 }
diff --git a/contact-name.template.hbs b/contact-name.template.hbs
 <p>
  {{name}}
 </p>
diff --git a/contacts.route.js b/contacts.route.js
 import Ember from 'ember';

 export default Ember.Route.extend({
  model() {
    return [
      {
        name: "Garrett",
        bio: "Awesome!"
      }
    ]
  }
 });
diff --git a/contacts.template.hbs b/contacts.template.hbs
 {{#each model as |contact|}}
  {{contact-box contact=contact}}
 {{/each}}
diff --git a/router.js b/router.js
 import Ember from 'ember';
 import config from './config/environment';

 var Router = Ember.Router.extend({
  location: config.locationType
 });

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

 export default Router;
diff --git a/styles.app.css b/styles.app.css
 body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
 }
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.4.11",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
 }
	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName:'Ember Twiddle'
	});
	<h1>Welcome to {{appName}}</h1>
	<br>
	<br>
	{{outlet}}
	{{#link-to 'contacts'}}Contacts{{/link-to}}
	<br>
	<br>
	.contact-bio-7305e53c {
	padding: 5px;
	border: 1px solid blue; }
	.contact-bio-7305e53c p {
	color: blue; }

	.contact-box-8e39ccec {
	padding: 5px;
	border: 1px solid red; }
	.contact-box-8e39ccec p {
	color: red; } # because this after contact-bio p .. these styles take over! :'(

	.contact-name-77d9f840 {
	padding: 5px;
	border: 1px solid green; }
	.contact-name-77d9f840 p {
	color: green; }

	/# sourceMappingURL=sass-pods-example.css.map /
	import Ember from 'ember';

	export default Ember.Component.extend({
	});
	& {
	padding: 5px;
	border: 1px solid green;

	p { color: green; }
	}
	<p>Contact Box</p>
	{{contact-name name=contact.name}}
	{{contact-bio bio=contact.bio}}
	import Ember from 'ember';

	export default Ember.Route.extend({
	model() {
	return [
	{
	name: "Garrett",
	bio: "Awesome!"
	}
	]
	}
	});
	{{#each model as \|contact\|}}
	{{contact-box contact=contact}}
	{{/each}}
	import Ember from 'ember';
	import config from './config/environment';

	var Router = Ember.Router.extend({
	location: config.locationType
	});

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

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