Skip to content

Instantly share code, notes, and snippets.

@mmun

mmun/one-route-multiple-models.html

Last active December 19, 2015 14:39
Show Gist options
  • Save mmun/5970693 to your computer and use it in GitHub Desktop.
Save mmun/5970693 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
one-route-multiple-models.html
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.js"></script>
<!-- <script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script> -->
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
Colors:
{{render "colorsWidget" model.colors}}
<hr>
Names:
{{render "namesWidget" model.names}}
</script>
<script type="text/x-handlebars" data-template-name="colorsWidget">
<table>
{{#each model itemController="colorItem"}}
<tr {{bindAttr style="backgroundStyle"}}>
<td>{{hex}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
</table>
</script>
<script type="text/x-handlebars" data-template-name="namesWidget">
<ul>
{{#each model}}
<li>{{{sexSymbol sex}}} {{name}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
Raw
one-route-multiple-models.js
window.App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
colors: Ember.$.getJSON('http://mmun.io/api/colors.json'),
names: Ember.$.getJSON('http://mmun.io/api/names.json')
});
}
});
App.ColorItemController = Ember.ObjectController.extend({
backgroundStyle: function() {
return "background-color: " + this.get("hex") + ";";
}.property()
});
Ember.Handlebars.registerHelper("sexSymbol", function(sexProp) {
var sex = Ember.get(this, sexProp);
if (sex == "male") return "&#x2642;";
if (sex == "female") return "&#x2640;";
return "&#x2603;";
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment