Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 12, 2015 20:23
Show Gist options
  • Save anonymous/edb65f115e2569038684 to your computer and use it in GitHub Desktop.
Save anonymous/edb65f115e2569038684 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit // source http://emberjs.jsbin.com/cijixisavo
Raw
index.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">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.12.0/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.12.0/ember.debug.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.18/ember-data.js"></script>
<script src="https://raw.githubusercontent.com/jakerella/jquery-mockjax/v2.0.1/dist/jquery.mockjax.min.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Link-to and Route#serialize issue</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#each model as |m|}}
{{#link-to 'user' m.author}}author{{/link-to}}
<br>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="user">
{{model.email}}
{{link-to "back" 'index'}}
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({});
App.Post = DS.Model.extend({
author: DS.belongsTo('user', { async: true }),
});
App.User = DS.Model.extend({
email: DS.attr('string'),
});
App.Router.map(function() {
this.route('user', { path: '/users/:email' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
App.UserRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('user', { email: params.email}).get('firstObject');
},
serialize: function(model) {
return model.get('email');
}
});
$.mockjax({
url: "/posts",
// responseTime: 200,
responseText: { posts: [{ id: 1, author_id: 1 }, { id: 2, author_id: 2}] },
});
$.mockjax({
url: "/users/1",
responseTime: 200,
responseText: { user: { id: 1, email: 'foo' } }
});
$.mockjax({
url: "/users/2",
responseTime: 200,
responseText: { user: { id: 2, email: 'bar' } }
});
</script>
<script id="jsbin-source-html" type="text/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">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.12.0/ember-template-compiler.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.12.0/ember.debug.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.18/ember-data.js"><\/script>
<script src="https://raw.githubusercontent.com/jakerella/jquery-mockjax/v2.0.1/dist/jquery.mockjax.min.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Link-to and Route#serialize issue</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
{{#each model as |m|}}
{{#link-to 'user' m.author}}author{{/link-to}}
<br>
{{/each}}
<\/script>
<script type="text/x-handlebars" data-template-name="user">
{{model.email}}
{{link-to "back" 'index'}}
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({});
App.Post = DS.Model.extend({
author: DS.belongsTo('user', { async: true }),
});
App.User = DS.Model.extend({
email: DS.attr('string'),
});
App.Router.map(function() {
this.route('user', { path: '/users/:email' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
App.UserRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('user', { email: params.email}).get('firstObject');
},
serialize: function(model) {
return model.get('email');
}
});
$.mockjax({
url: "/posts",
// responseTime: 200,
responseText: { posts: [{ id: 1, author_id: 1 }, { id: 2, author_id: 2}] },
});
$.mockjax({
url: "/users/1",
responseTime: 200,
responseText: { user: { id: 1, email: 'foo' } }
});
$.mockjax({
url: "/users/2",
responseTime: 200,
responseText: { user: { id: 2, email: 'bar' } }
});</script></body>
</html>
Raw
jsbin.cijixisavo.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.cijixisavo.js
App = Ember.Application.create();
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({});
App.Post = DS.Model.extend({
author: DS.belongsTo('user', { async: true }),
});
App.User = DS.Model.extend({
email: DS.attr('string'),
});
App.Router.map(function() {
this.route('user', { path: '/users/:email' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
App.UserRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('user', { email: params.email}).get('firstObject');
},
serialize: function(model) {
return model.get('email');
}
});
$.mockjax({
url: "/posts",
// responseTime: 200,
responseText: { posts: [{ id: 1, author_id: 1 }, { id: 2, author_id: 2}] },
});
$.mockjax({
url: "/users/1",
responseTime: 200,
responseText: { user: { id: 1, email: 'foo' } }
});
$.mockjax({
url: "/users/2",
responseTime: 200,
responseText: { user: { id: 2, email: 'bar' } }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment