Skip to content

Instantly share code, notes, and snippets.

@ggstuart

ggstuart/index.html

Created April 17, 2015 10:31
Show Gist options
  • Save ggstuart/dd6cb4b2296374cf05af to your computer and use it in GitHub Desktop.
Save ggstuart/dd6cb4b2296374cf05af to your computer and use it in GitHub Desktop.
Download ZIP
Select example ember select box demo using ember data belongsTo relationship // source http://emberjs.jsbin.com/forixeyuku
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ember select box demo using ember data belongsTo relationship">
<meta charset="utf-8">
<title>Select example</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.11.1/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.11.1/ember.debug.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.16.1/ember-data.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Select example</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<label>name: </label>{{name}}<br><br>
<label>Category: </label>
{{view "select"
content=categories
optionValuePath="content"
optionLabelPath="content.description"
selection=category}}
<p>Selected category: {{category.code}}</p>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter;
App.Router.map(function() {
// put your routes here
});
App.Category = DS.Model.extend({
code: DS.attr('string'),
description: DS.attr('string')
});
App.Student = DS.Model.extend({
name: DS.attr('string'),
category: DS.belongsTo('category', {async: true})
});
App.Category.FIXTURES = [
{
id: 1,
code: "A",
description: "category A"
},
{
id: 2,
code: "B",
description: "category B"
},
{
id: 3,
code: "C",
description: "category C"
}
];
App.Student.FIXTURES = [
{
id: 1,
name: 'Student 1',
category: 2
}
];
App.IndexRoute = Ember.Route.extend({
model: function() {
console.log("!!");
return this.store.find('student', 1);
},
setupController: function(controller, model) {
this._super(controller, model);
controller.set('categories', this.store.find('category'));
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="ember select box demo using ember data belongsTo relationship">
<meta charset="utf-8">
<title>Select example</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.11.1/ember-template-compiler.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.11.1/ember.debug.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.0.0-beta.16.1/ember-data.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Select example</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<label>name: </label>{{name}}<br><br>
<label>Category: </label>
{{view "select"
content=categories
optionValuePath="content"
optionLabelPath="content.description"
selection=category}}
<p>Selected category: {{category.code}}</p>
<\/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.FixtureAdapter;
App.Router.map(function() {
// put your routes here
});
App.Category = DS.Model.extend({
code: DS.attr('string'),
description: DS.attr('string')
});
App.Student = DS.Model.extend({
name: DS.attr('string'),
category: DS.belongsTo('category', {async: true})
});
App.Category.FIXTURES = [
{
id: 1,
code: "A",
description: "category A"
},
{
id: 2,
code: "B",
description: "category B"
},
{
id: 3,
code: "C",
description: "category C"
}
];
App.Student.FIXTURES = [
{
id: 1,
name: 'Student 1',
category: 2
}
];
App.IndexRoute = Ember.Route.extend({
model: function() {
console.log("!!");
return this.store.find('student', 1);
},
setupController: function(controller, model) {
this._super(controller, model);
controller.set('categories', this.store.find('category'));
}
});
</script></body>
</html>
Raw
jsbin.forixeyuku.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.forixeyuku.js
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter;
App.Router.map(function() {
// put your routes here
});
App.Category = DS.Model.extend({
code: DS.attr('string'),
description: DS.attr('string')
});
App.Student = DS.Model.extend({
name: DS.attr('string'),
category: DS.belongsTo('category', {async: true})
});
App.Category.FIXTURES = [
{
id: 1,
code: "A",
description: "category A"
},
{
id: 2,
code: "B",
description: "category B"
},
{
id: 3,
code: "C",
description: "category C"
}
];
App.Student.FIXTURES = [
{
id: 1,
name: 'Student 1',
category: 2
}
];
App.IndexRoute = Ember.Route.extend({
model: function() {
console.log("!!");
return this.store.find('student', 1);
},
setupController: function(controller, model) {
this._super(controller, model);
controller.set('categories', this.store.find('category'));
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment