Created
April 14, 2014 06:39
-
-
Save jonahoffline/10621776 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Put your CSS here */ | |
| html, body { | |
| margin: 20px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment