Skip to content

Instantly share code, notes, and snippets.

@cullymason

cullymason/Index.html

Created May 30, 2013 22:21
Show Gist options
  • Save cullymason/5681735 to your computer and use it in GitHub Desktop.
Save cullymason/5681735 to your computer and use it in GitHub Desktop.
Download ZIP
Here is the basic problem I am having: If I visit the site from say "http://localhost/#/categories" and then click on a category it does not display the badges for that category. However if I go to the category directly, "http://localhost/#/categories/2/", then it loads all of the badges just fine. I know that this would be easier in a jsbin bu…
Raw
app.js
App = Ember.Application.create(
{LOG_TRANSITIONS: true}
);
App.Store = DS.Store.extend({
adapter: 'DS.RESTAdapter',
});
DS.RESTAdapter.configure("plurals", {
badge: "badges",
category: "categories"
});
DS.RESTAdapter.reopen({
url: 'http://localhost:8000'
});
App.Category = DS.Model.extend({
'label': DS.attr('string'),
'ord': DS.attr('string'),
'parent': DS.attr('number'),
'access_role': DS.attr('string'),
'created_at': DS.attr('string'),
'updated_at': DS.attr('string'),
'children': DS.hasMany('App.Category', {inverse: 'parent'}),
'badges': DS.hasMany('App.Badge')
});
App.Badge = DS.Model.extend({
'category': DS.belongsTo('App.Category'),
'title': DS.attr('string'),
'type': DS.attr('string'),
'ord': DS.attr('number'),
'shortDescription': DS.attr('string'),
'fullDescription': DS.attr('string'),
'icon': DS.attr('string'),
'required': DS.attr('boolean'),
'signoff_role': DS.attr('string'),
'created_at': DS.attr('string'),
'updated_at': DS.attr('string')
});
App.Router.map(function() {
this.route("index", { path: "/" })
this.resource("categories",{path:'categories'} , function(){
this.resource("category",{path:':category_id'},function(){
this.resource('badge', {path: ':badge_id'},function(){
this.route('basic', {path: 'basic'}),
this.route('resources', {path: 'resources'}),
this.route('verification', {path: 'verification'}),
this.route('permissions', {path: 'permissions'})
this.resource('edit', {path: 'edit'}, function() {
this.route('basic', {path: 'basic'}),
this.route('publish', {path: 'publish'}),
this.route('resources', {path: 'resources'})
this.resource('verification', {path: 'verification'}, function() {
this.route('create'),
this.route('upload'),
this.route('signoff'),
this.route('info'),
this.resource('quiz', {path: 'quiz'},function() {
this.route('question', {path: ':question_id'})
})
})
})
})
})
});
});
App.ApplicationRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('categories');
}
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('categories');
}
});
App.ApplicationView = Ember.View.extend({
templateName: 'application',
classNames: ['row','full']
})
App.CategoriesRoute = Ember.Route.extend({
model: function() {
return App.Category.find();
}
});
App.CategoryRoute = Ember.Route.extend({
model: function(params) {
var category = App.Category.find(params.category_id);
console.log(category)
return category;
}
});
App.BadgeRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('badge.basic');
}
})
App.BadgeIndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('badge.basic');
}
})
App.BadgeBasicRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('badge');
}
})
Raw
categories.json
{
"categories":
[
{"id":1,"label":"CWS 101","ord":1,"parent":null,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[2,3,4],"badges":[]},
{"id":2,"label":"HR","ord":2,"parent":1,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[],"badges":[1,2]},
{"id":3,"label":"CZ & Tools","ord":3,"parent":1,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[],"badges":[]},
{"id":4,"label":"Travel","ord":4,"parent":1,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[],"badges":[]}
],
"badges":
[
{"id":1,"title":"Welcome To Connectivity","short_description":null,"full_description":null,"icon":null,"category_id":2,"mentor_id":null,"type":null,"required":0,"ord":null,"signoff_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05"},
{"id":2,"title":"Know Your Benefits","short_description":null,"full_description":null,"icon":null,"category_id":2,"mentor_id":null,"type":null,"required":0,"ord":null,"signoff_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05"}
]
}
Raw
category.json
{
"category": {"id":2,"label":"HR","ord":2,"parent":1,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[],"badge_ids":[1,2]},
"badges":
[
{"id":1,"title":"Welcome To Connectivity","short_description":null,"full_description":null,"icon":null,"category_id":2,"mentor_id":null,"type":null,"required":0,"ord":null,"signoff_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05"},
{"id":2,"title":"Know Your Benefits","short_description":null,"full_description":null,"icon":null,"category_id":2,"mentor_id":null,"type":null,"required":0,"ord":null,"signoff_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05"}
]
}
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="<?php echo Request::root() ?>css/normalize.css">
<link rel="stylesheet" href="<?php echo Request::root() ?>css/style.css">
<link rel="stylesheet" href="<?php echo Request::root() ?>/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="<?php echo Request::root() ?>/css/style.css" type="text/css">
<style type="text/css">
</style>
</head>
<body style="height:100%">
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="categories">
<div class="col col-lg-2 menu1">
<ul>
{{#each category in model}}
{{#linkTo category category tagName="li"}}
{{category.label}}
{{/linkTo}}
{{/each}}
</ul>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="categories/index">
<div class="container">
<div class="row">
<div class="col col-lg-8">
<p class="lead text-muted" style="margin-top:2em;"><span class="glyphicon glyphicon-chevron-left"></span> Choose a Category</p>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="category">
<div class="col col-lg-3 menu2">
<ul style="">
<li class="menu2-header" style="">
<button class="btn btn-small btn-default">New</button>
</li>
{{#each badge in badges}}
{{#linkTo badge badge tagName="li"}}
<h6 style="">
{{badge.type}}
</h6>
<h4 style="">
<strong>{{badge.title}}</strong>
</h4>
<p>
{{badge.shortDescription}}
</p>
{{/linkTo}}
{{else}}
<p class="lead text-center" style="margin-top:2em">
No Badges in {{label}}
</p>
{{/each}}
</ul>
</div>
<div class="col col-lg-7">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="category/index">
<p class="lead text-muted" style="margin-top:5em;"><span class="glyphicon glyphicon-chevron-left"></span> Choose a Badge</p>
</script>
<script type="text/x-handlebars" data-template-name="badge">
<div class="row">
<ul class="list-inline badge-menu">
{{#linkTo badge.basic tagName="li"}}Basic Info{{/linkTo}}
{{#linkTo badge.resources tagName="li"}}Resources{{/linkTo}}
{{#linkTo badge.verification tagName="li"}}Verification{{/linkTo}}
{{#linkTo badge.permissions tagName="li"}}Permissions{{/linkTo}}
</ul>
</div>
<div class="row">
<div class="col col-lg-12" style="border-bottom: 1px solid #eee;">
<h2 style="margin-bottom:1.25em;margin-top:1em">
{{title}} <small>{{shortDescription}}</small>
</h2>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="badge/basic">
<div class="row">
<div class="col col-lg-11">
<h4>
Description
</h4>
<p>
{{fullDescription}}
</p>
</div>
</div>
<div class="row">
<div class="col col-lg-12">
<h4>
Mentor
</h4>
<address>
<strong>David Hartin</strong><br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
</div>
</div>
</script>
<script src="<?php echo Request::root() ?>/js/libs/jquery-1.9.1.js"></script>
<script src="<?php echo Request::root() ?>/js/libs/handlebars-1.0.0-rc.4.js"></script>
<script src="<?php echo Request::root() ?>/js/libs/ember-1.0.0-rc.4.js"></script>
<script src="<?php echo Request::root() ?>/js/libs/ember-data.js"></script>
<script src="<?php echo Request::root() ?>/js/app.js"></script>
</body>
</html>
@cullymason
Copy link
Author

Solved

the JSON was throwing it off. in categories it was expecting badge_ids and I was giving it badges in file https://gist.github.com/cullymason/5681735#file-categories-json

This

{"id":1,"label":"CWS 101","ord":1,"parent":null,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[2,3,4], "badges" :[]},

Should be

{"id":1,"label":"CWS 101","ord":1,"parent":null,"access_role":null,"created_at":"2013-05-30 20:03:05","updated_at":"2013-05-30 20:03:05","children":[2,3,4], "badge_ids" :[]},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment