Skip to content

Instantly share code, notes, and snippets.

@heycarsten
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save heycarsten/ca20fecd373a649829f0 to your computer and use it in GitHub Desktop.
Save heycarsten/ca20fecd373a649829f0 to your computer and use it in GitHub Desktop.
Aliasing Ember properties depending on existence of other properties
<html>
<head>
<title>Learnin'</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
<style>
body {
margin: 30px auto;
width: 600px;
}
table {
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
box-sizing: padding-box;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js" type="text/javascript"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js" type="text/javascript"></script>
<script>
App = Ember.Application.create();
App.Router.map(function() {
});
DasMixin = Ember.Mixin.create({
fsmIsLoading: false,
init: function() {
if (this.get('isLoading') === undefined) {
// alias it
this.reopen({
isLoading: Em.computed.reads('fsmIsLoading')
});
} else {
// leave it
}
this._super();
}
});
App.Model = Ember.Object.extend(DasMixin, {
isLoading: false
});
App.NonModel = Ember.Object.extend(DasMixin);
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('model', App.Model.create());
controller.set('nonModel', App.NonModel.create());
}
});
App.IndexController = Ember.Controller.extend({
actions: {
toggleModel: function() {
this.toggleProperty('model.fsmIsLoading');
},
toggleNonModel: function() {
this.toggleProperty('nonModel.fsmIsLoading');
}
}
});
</script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>App.Model</h2>
<p>
<code>App.Model</code> is an example of an object that has an existing
property which would otherwise conflict with ours. In this case, we
leave the conflicting propery alone. Users of our library use the
prefixed <code>fsmIsLoading</code> propery.
</p>
<table>
<tbody>
<tr>
<td><code>fsmIsLoading</code></td>
<td>{{model.fsmIsLoading}}</td>
<td><button {{action "toggleModel"}}>Toggle</button></td>
</tr>
<tr>
<td><code>isLoading</code></td>
<td>{{model.isLoading}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2>App.NonModel</h2>
<p>
<code>App.NonModel</code> is an example of an object that does not have
any confilcting properties. In this case we can alias to our prefixed
property.
</p>
<table>
<tbody>
<tr>
<td><code>fsmIsLoading</code></td>
<td>{{nonModel.fsmIsLoading}}</td>
<td><button {{action "toggleNonModel"}}>Toggle</button></td>
</tr>
<tr>
<td><code>isLoading</code></td>
<td>{{nonModel.isLoading}}</td>
<td></td>
</tr>
</tbody>
</table>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment