jonahoffline/jsbin.AgoHITa.css

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

## jsbin.AgoHITa.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" data-template-name="index">
    {{country}}
    {{state}}

    {{!-- this is the completely reusable public API --}}
    {{dependent-select-fields
        selectValue=country
        subSelectValue=state
        selectOptions=countryOptions}}
    {{!-- END this is the completely reusable public API --}}
  </script>


  <script type="text/x-handlebars">
    <p>Select in the first select box to populate the options for the second. The options are defined in an object with array properties that looks like...</p>
    <pre>
var countryOptions = {
  'USA': ['NY', 'CA', 'PA', 'MA', 'AWESOMESTATESTHATIDONTWANTTOTYPE'],
  'Canada': ['Ontario', 'Quebec', 'Nova Scotia'],
}
  </pre>

    {{outlet}}
  </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>

    <script type="text/x-handlebars" data-template-name="components/dependent-select-fields">
    {{view Ember.Select contentBinding=view.valuesForSelect valueBinding=selectValue}}
    {{view Ember.Select contentBinding=view.valuesForSubSelect valueBinding=subSelectValue}}
  </script>

</body>
</html>

## jsbin.AgoHITa.js


var countryOptions = {
  'USA': ['NY', 'CA', 'PA', 'MA', 'AWESOMESTATESTHATIDONTWANTTOTYPE'],
  'Canada': ['Ontario', 'Quebec', 'Nova Scotia'],
}


App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      country: '',
      state: ''
    };
  }
});

App.IndexController = Ember.ObjectController.extend({
  countryOptions: countryOptions
});

App.DependentSelectFieldsComponent = Ember.Component.extend({
  onSelectValueChanged: function(){
    this.set('subSelectValue', '');
  }.observes('selectValue'),
  valuesForSelect: function () {
     return [''].concat(Object.keys(this.get('selectOptions')));
  }.property('selectOptions'),
  valuesForSubSelect: function () {
    var selectValue = this.get('selectValue');
    if (!selectValue) {
      return [];
    }
    return [''].concat(this.get('selectOptions')[selectValue]);
  }.property('selectOptions', 'selectValue')
});
	<!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" data-template-name="index">
	{{country}}
	{{state}}

	{{!-- this is the completely reusable public API --}}
	{{dependent-select-fields
	selectValue=country
	subSelectValue=state
	selectOptions=countryOptions}}
	{{!-- END this is the completely reusable public API --}}
	</script>




	<script type="text/x-handlebars">
	<p>Select in the first select box to populate the options for the second. The options are defined in an object with array properties that looks like...</p>
	<pre>
	var countryOptions = {
	'USA': ['NY', 'CA', 'PA', 'MA', 'AWESOMESTATESTHATIDONTWANTTOTYPE'],
	'Canada': ['Ontario', 'Quebec', 'Nova Scotia'],
	}
	</pre>

	{{outlet}}
	</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>

	<script type="text/x-handlebars" data-template-name="components/dependent-select-fields">
	{{view Ember.Select contentBinding=view.valuesForSelect valueBinding=selectValue}}
	{{view Ember.Select contentBinding=view.valuesForSubSelect valueBinding=subSelectValue}}
	</script>

	</body>
	</html>