flynfish/jsbin.iniqiwi.css

## jsbin.iniqiwi.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

## jsbin.iniqiwi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  {{view Ember.Select
    contentBinding="controller"
    optionValuePath="content.country"
    optionLabelPath="content.country"
   selectionBinding="selectedCountry"
  }}

  {{view Ember.Select
    contentBinding="states"
    optionValuePath="content.state"
    optionLabelPath="content.state"
    selectionBinding="selectedState"
  }}

  {{view Ember.Select
    contentBinding="cities"
    optionValuePath="content.city"
    optionLabelPath="content.city"
    selectionBinding="selectedCity"
  }}

  </script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>

</body>
</html>

## jsbin.iniqiwi.js
App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return [
      {country: 'USA', states: [
        {state: 'Alabama',
         cities: [{city: "Birmingham"}, {city: "Athens"}]
        },
        {state: 'Colorado',
         cities: [{city: "Boulder"}]
        }
      ]},
      {country: 'Canada', states: [
        {state: 'Nova Scotia',
         cities: [{city: "Halifax"}, {city: "Sydney"}]
        },
        {state: 'Alberta',
         cities: [{city: "Calgary"}]
        }
      ]},
       {country: 'Mexico', states: [
         {state: 'Oaxaca',
          cities: [{city: "El Rodeo"}, {city: "Astatla"}]
         }
      ]}
    ];
  },

  setupController: function(controller, model){
    controller.setProperties({
      model: model
    });
  }
});

App.IndexController= Ember.ArrayController.extend({
  selectedCountry: null,
  selectedState: null,
  selectedCity: null,
  states: function(){
    return this.get("selectedCountry.states") || this.get("content.firstObject.states");
  }.property("content.firstObject.states", "selectedCountry.states"),
  cities: function(){
    return this.get("selectedState.cities") || this.get("states.firstObject.cities");
  }.property("selectedState.cities", "states.firstObject.cities" ),

  updateSelects: function(){

   console.log("selected values");
   console.log(this.get('selectedCountry'), this.get('selectedState'), this.get('selectedCity'));
   console.log("computed values");
  console.log("States: ", this.get("states"));
  console.log("cities: ", this.get("cities"));
    //add any code to set selected properties
  }.observes('selectedCountry', 'selectedState', 'selectedCity')
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2>Welcome to Ember.js</h2>

	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	{{view Ember.Select
	contentBinding="controller"
	optionValuePath="content.country"
	optionLabelPath="content.country"
	selectionBinding="selectedCountry"
	}}

	{{view Ember.Select
	contentBinding="states"
	optionValuePath="content.state"
	optionLabelPath="content.state"
	selectionBinding="selectedState"
	}}

	{{view Ember.Select
	contentBinding="cities"
	optionValuePath="content.city"
	optionLabelPath="content.city"
	selectionBinding="selectedCity"
	}}

	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>

	</body>
	</html>
	App = Ember.Application.create();

	App.Router.map(function() {
	// put your routes here
	});

	App.IndexRoute = Ember.Route.extend({
	model: function(){
	return [
	{country: 'USA', states: [
	{state: 'Alabama',
	cities: [{city: "Birmingham"}, {city: "Athens"}]
	},
	{state: 'Colorado',
	cities: [{city: "Boulder"}]
	}
	]},
	{country: 'Canada', states: [
	{state: 'Nova Scotia',
	cities: [{city: "Halifax"}, {city: "Sydney"}]
	},
	{state: 'Alberta',
	cities: [{city: "Calgary"}]
	}
	]},
	{country: 'Mexico', states: [
	{state: 'Oaxaca',
	cities: [{city: "El Rodeo"}, {city: "Astatla"}]
	}
	]}
	];
	},

	setupController: function(controller, model){
	controller.setProperties({
	model: model
	});
	}
	});

	App.IndexController= Ember.ArrayController.extend({
	selectedCountry: null,
	selectedState: null,
	selectedCity: null,
	states: function(){
	return this.get("selectedCountry.states") \|\| this.get("content.firstObject.states");
	}.property("content.firstObject.states", "selectedCountry.states"),
	cities: function(){
	return this.get("selectedState.cities") \|\| this.get("states.firstObject.cities");
	}.property("selectedState.cities", "states.firstObject.cities" ),

	updateSelects: function(){

	console.log("selected values");
	console.log(this.get('selectedCountry'), this.get('selectedState'), this.get('selectedCity'));
	console.log("computed values");
	console.log("States: ", this.get("states"));
	console.log("cities: ", this.get("cities"));
	//add any code to set selected properties
	}.observes('selectedCountry', 'selectedState', 'selectedCity')
	});