ChanderG/jsbin.doceq.html

## jsbin.doceq.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-2.0.2.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.5.0/ember.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>

<body>

  <script type="text/x-handlebars" data-template-name="application">
    <h1>Ember Data there?</h1>
    This is an example of hasMany - belongsTo</br>
    See comments and output</br></br>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    HERE IS A LIST of Customers:
    <ul>
      {{#each}}
      <li>{{id}} {{name}}</li>
      <ul>
        {{#each order in orders}}
          <li>{{order.name}}</li>
        {{/each}}
      </ul>
     {{/each}}
  </ul>

  <button {{action showOrders}}>Show</button>
  HERE IS A LIST of Orders:
  <ul>
     {{#each order in controller.orders}}
       <li>{{order.id}} {{order.name}} ordered by {{order.customer.name}}</li>
     {{/each}}
  </ul>


  </script>


</body>
</html>


## jsbin.doceq.js
App = Ember.Application.create({LOG_TRANSITIONS: true});

App.ApplicationAdapter = DS.FixtureAdapter.extend({});

App.Router.map(function() {

});

App.Customer = DS.Model.extend({
    name: DS.attr('string'),
    orders: DS.hasMany("order", {async: true})  //needs async true to load required data on its own
});

App.Customer.FIXTURES = [
  {
    id: 1,
    name: "Harry",
    orders: [1,3]
  },
  {
    id: 2,
    name: "Ron",
    orders: [2,3]   //3 belongsTo only Harry; this should not work
  }
];

App.Order = DS.Model.extend({
    name: DS.attr('string'),
    customer: DS.belongsTo('customer')
});

App.Order.FIXTURES = [
  {
    id: 1,
    name: "Butterbeer T23" //,
    //customer: 1          ------------>Commenting out still works
  },
  {
    id: 2,
    name: "Chocolate Frogs T24",
    customer: 2
  },
  {
    id: 3,
    name: "Liquorice Cakes T72",
    customer: 1
  }
];

/*
App.Item  = DS.Model.extend({
    name: DS.attr('string'),
    orderlines: DS.hasMany("orderline")
});
*/

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return this.store.find('customer');
  }

});


App.IndexController = Ember.ArrayController.extend({
  orders: null,
  actions: {
    showOrders: function(){
        console.log('hello there');
       this.set('orders', this.get('store').find('order'));
    }
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script src="http://code.jquery.com/jquery-2.0.2.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.5.0/ember.js"></script>
	<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
	</head>

	<body>

	<script type="text/x-handlebars" data-template-name="application">
	<h1>Ember Data there?</h1>
	This is an example of hasMany - belongsTo</br>
	See comments and output</br></br>
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	HERE IS A LIST of Customers:
	<ul>
	{{#each}}
	<li>{{id}} {{name}}</li>
	<ul>
	{{#each order in orders}}
	<li>{{order.name}}</li>
	{{/each}}
	</ul>
	{{/each}}
	</ul>

	<button {{action showOrders}}>Show</button>
	HERE IS A LIST of Orders:
	<ul>
	{{#each order in controller.orders}}
	<li>{{order.id}} {{order.name}} ordered by {{order.customer.name}}</li>
	{{/each}}
	</ul>


	</script>


	</body>
	</html>
	App = Ember.Application.create({LOG_TRANSITIONS: true});

	App.ApplicationAdapter = DS.FixtureAdapter.extend({});

	App.Router.map(function() {

	});

	App.Customer = DS.Model.extend({
	name: DS.attr('string'),
	orders: DS.hasMany("order", {async: true}) //needs async true to load required data on its own
	});

	App.Customer.FIXTURES = [
	{
	id: 1,
	name: "Harry",
	orders: [1,3]
	},
	{
	id: 2,
	name: "Ron",
	orders: [2,3] //3 belongsTo only Harry; this should not work
	}
	];

	App.Order = DS.Model.extend({
	name: DS.attr('string'),
	customer: DS.belongsTo('customer')
	});

	App.Order.FIXTURES = [
	{
	id: 1,
	name: "Butterbeer T23" //,
	//customer: 1 ------------>Commenting out still works
	},
	{
	id: 2,
	name: "Chocolate Frogs T24",
	customer: 2
	},
	{
	id: 3,
	name: "Liquorice Cakes T72",
	customer: 1
	}
	];

	/*
	App.Item = DS.Model.extend({
	name: DS.attr('string'),
	orderlines: DS.hasMany("orderline")
	});
	*/

	App.IndexRoute = Ember.Route.extend({
	model: function(){
	return this.store.find('customer');
	}

	});


	App.IndexController = Ember.ArrayController.extend({
	orders: null,
	actions: {
	showOrders: function(){
	console.log('hello there');
	this.set('orders', this.get('store').find('order'));
	}
	}
	});