Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 10, 2016 12:50
Show Gist options
  • Save anonymous/7313f356b58aab2a91d049ae66949afc to your computer and use it in GitHub Desktop.
Save anonymous/7313f356b58aab2a91d049ae66949afc to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit // source http://jsbin.com/sarobu/1
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">
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>My Library</h2>
<hr>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#each model as |author| }}
<section>
<h3>{{author.name}}</h3>
<ul>
{{#each author.books as |book|}}
<li>{{book.title}}</li>
{{/each}}
</ul>
</section>
{{/each}}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script> <script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.get('store').findAll('author');
}
});
App.IndexController= Ember.Controller;
App.ApplicationAdapter= DS.JSONAPIAdapter;
App.Author = DS.Model.extend({
name: DS.attr('string'),
books: DS.hasMany('book', { async: false })
});
App.Book = DS.Model.extend({
title: DS.attr('string'),
author: DS.belongsTo('author', { async: false })
});
// Returns books embedded in authors
$.mockjax({
type: 'GET',
url: '/authors',
status: '200',
dataType: 'json',
responseText: {
data: [{
id: 1, type: 'authors',
attributes: { name: "Mark Twain" },
relationships: { books: { data: [{ id: 1, type: 'books' }]}}
}, {
id: 2, type: 'authors',
attributes: { name: "Ernest Hemingway" },
relationships: { books: { data: [{ id: 2, type: 'books' }, { id: 3, type: 'books' }]}}
}, {
id: 3, type: 'authors',
attributes: { name: "Stephen King" },
relationships: { books: { data: [{ id: 4, type: 'books' }, { id: 5, type: 'books' }, { id: 6, type: 'books' }]}}
}],
included : [{
id: 1, type: 'books',
attributes: { title: 'Tom Sawyer' }
}, {
id: 2, type: 'books',
attributes: { title: 'A Farewell To Arms' }
}, {
id: 3, type: 'books',
attributes: { title: 'The Old Man And the Sea' }
}, {
id: 4, type: 'books',
attributes: { title: 'The Shining' }
}, {
id: 5, type: 'books',
attributes: { title: 'The Stand' }
}, {
id: 6, type: 'books',
attributes: { title: 'The Long Walk' }
}]
}
});
</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">
</head>
<body>
<script type="text/x-handlebars">
<h2>My Library</h2>
<hr>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
{{#each model as |author| }}
<section>
<h3>{{author.name}}</h3>
<ul>
{{#each author.books as |book|}}
<li>{{book.title}}</li>
{{/each}}
</ul>
</section>
{{/each}}
<\/script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.emberjs.com/release/ember.debug.js"><\/script> <script src="http://builds.emberjs.com/release/ember-template-compiler.js"><\/script>
<script src="http://builds.emberjs.com/release/ember-data.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"><\/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.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.get('store').findAll('author');
}
});
App.IndexController= Ember.Controller;
App.ApplicationAdapter= DS.JSONAPIAdapter;
App.Author = DS.Model.extend({
name: DS.attr('string'),
books: DS.hasMany('book', { async: false })
});
App.Book = DS.Model.extend({
title: DS.attr('string'),
author: DS.belongsTo('author', { async: false })
});
// Returns books embedded in authors
$.mockjax({
type: 'GET',
url: '/authors',
status: '200',
dataType: 'json',
responseText: {
data: [{
id: 1, type: 'authors',
attributes: { name: "Mark Twain" },
relationships: { books: { data: [{ id: 1, type: 'books' }]}}
}, {
id: 2, type: 'authors',
attributes: { name: "Ernest Hemingway" },
relationships: { books: { data: [{ id: 2, type: 'books' }, { id: 3, type: 'books' }]}}
}, {
id: 3, type: 'authors',
attributes: { name: "Stephen King" },
relationships: { books: { data: [{ id: 4, type: 'books' }, { id: 5, type: 'books' }, { id: 6, type: 'books' }]}}
}],
included : [{
id: 1, type: 'books',
attributes: { title: 'Tom Sawyer' }
}, {
id: 2, type: 'books',
attributes: { title: 'A Farewell To Arms' }
}, {
id: 3, type: 'books',
attributes: { title: 'The Old Man And the Sea' }
}, {
id: 4, type: 'books',
attributes: { title: 'The Shining' }
}, {
id: 5, type: 'books',
attributes: { title: 'The Stand' }
}, {
id: 6, type: 'books',
attributes: { title: 'The Long Walk' }
}]
}
});</script></body>
</html>
Raw
jsbin.sarobu.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.sarobu.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.get('store').findAll('author');
}
});
App.IndexController= Ember.Controller;
App.ApplicationAdapter= DS.JSONAPIAdapter;
App.Author = DS.Model.extend({
name: DS.attr('string'),
books: DS.hasMany('book', { async: false })
});
App.Book = DS.Model.extend({
title: DS.attr('string'),
author: DS.belongsTo('author', { async: false })
});
// Returns books embedded in authors
$.mockjax({
type: 'GET',
url: '/authors',
status: '200',
dataType: 'json',
responseText: {
data: [{
id: 1, type: 'authors',
attributes: { name: "Mark Twain" },
relationships: { books: { data: [{ id: 1, type: 'books' }]}}
}, {
id: 2, type: 'authors',
attributes: { name: "Ernest Hemingway" },
relationships: { books: { data: [{ id: 2, type: 'books' }, { id: 3, type: 'books' }]}}
}, {
id: 3, type: 'authors',
attributes: { name: "Stephen King" },
relationships: { books: { data: [{ id: 4, type: 'books' }, { id: 5, type: 'books' }, { id: 6, type: 'books' }]}}
}],
included : [{
id: 1, type: 'books',
attributes: { title: 'Tom Sawyer' }
}, {
id: 2, type: 'books',
attributes: { title: 'A Farewell To Arms' }
}, {
id: 3, type: 'books',
attributes: { title: 'The Old Man And the Sea' }
}, {
id: 4, type: 'books',
attributes: { title: 'The Shining' }
}, {
id: 5, type: 'books',
attributes: { title: 'The Stand' }
}, {
id: 6, type: 'books',
attributes: { title: 'The Long Walk' }
}]
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment