Last active
December 27, 2015 13:09
-
-
Save tonywok/7331282 to your computer and use it in GitHub Desktop.
Ember pattern for binding your data to other data conditionally. Useful when you have lots of properties following a naming convention that need to be copied and/or updated dependent on state. (E.g copying address to billing/shipping address)
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"> | |
| {{outlet}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="index"> | |
| <h3>Foos</h3> | |
| {{input value=foo}}<br/> | |
| {{input value=foo1}}<br/> | |
| {{input value=custom}}</br> | |
| <br/> | |
| <h3>Other Foos</h3> | |
| <label> | |
| Copy Foos? | |
| {{view Ember.Checkbox checked=copyFoos}} | |
| </label> | |
| <br/> | |
| {{#if copyFoos}} | |
| <p style="color: red;">Now go edit Foo values</p> | |
| {{/if}} | |
| <br/> | |
| {{input value=otherFoo disabled=copyFoos}}<br/> | |
| {{input value=otherFoo1 disabled=copyFoos}}<br/> | |
| {{input value=otherFoo2 disabled=copyFoos}}<br/> | |
| <h3> Model Values </h3> | |
| <table border=1> | |
| <tr> | |
| <td><strong>Attr</strong></td> | |
| <td><strong>Value</strong></td> | |
| </tr> | |
| <tr> | |
| <td>foo</td> | |
| <td>{{foo}}</td> | |
| </tr> | |
| <tr> | |
| <td>foo1</td> | |
| <td>{{foo1}}</td> | |
| </tr> | |
| <tr> | |
| <td>otherFoo</td> | |
| <td>{{otherFoo}}</td> | |
| </tr> | |
| <tr> | |
| <td>otherFoo1</td> | |
| <td>{{otherFoo1}}</td> | |
| </tr> | |
| <tr> | |
| <td>otherFoo2</td> | |
| <td>{{otherFoo2}}</td> | |
| </tr> | |
| </table> | |
| </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.1.2/ember.min.js"></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
| App = Ember.Application.create(); | |
| App.Router.map(function() { | |
| // put your routes here | |
| }); | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| var thing = Ember.Object.createWithMixins(Em.Observable, { | |
| // setup conditional data observers | |
| // | |
| init: function() { | |
| this.conditionalDataCopyObserver('foo'); | |
| this.conditionalDataCopyObserver('foo1'); | |
| this.conditionalDataCopyObserver('foo2', 'custom'); | |
| // this.conditionalDataCopyObserver('foo3'); etc... | |
| return this._super(); | |
| }, | |
| // simulated properties | |
| // | |
| custom: "bar coming from elsewhere", | |
| copyFoos: false, | |
| foo: "bar", | |
| foo1: "bar1", | |
| // foo3, foo4, etc... | |
| otherFoo: "other bar", | |
| otherFoo1: "other bar1", | |
| otherFoo2: "yet another bar", | |
| // otherFoo2, otherFoo3, otherFoo4, etc... | |
| // copy the values if desired | |
| // | |
| makeItTheSame: function() { | |
| if (this.get('copyFoos')) { | |
| this.set('otherFoo', this.get('foo')); | |
| this.set('otherFoo1', this.get('foo1')); | |
| this.set('otherFoo2', this.get('custom')); | |
| } | |
| }.observes('copyFoos'), | |
| // Hurray less lines of code? | |
| // | |
| conditionalDataCopyObserver: function(propertyKey, observingPropertyKey) { | |
| if (typeof observingPropertyKey === "undefined") { | |
| observingPropertyKey = propertyKey; | |
| } | |
| this.addObserver(observingPropertyKey, this, function() { | |
| var propertyVal = this.get(observingPropertyKey); | |
| if (this.get('copyFoos')) { | |
| this.set('other'+propertyKey.capitalize(), propertyVal); | |
| } | |
| }); | |
| } | |
| }); | |
| return thing; | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment