Ember.js loading json into HTML

Question

I am trying to get a simple function that gets some json and put it into the HTML. Now here is my code. What I am looking for is a explanation of why this isn't working/ what my logic is missing in the understating of how to use Ember.js

app.js

App.Classes = Ember.Object.extend({
});

App.ClassesController = Ember.ObjectController.extend({
});

App.ClassesView = Ember.View.extend({
     // the controller is the initial context for the template
     templateName: "classDates"
});

var classes = App.Classes.create();
var classesController = App.ClassesController.create({ model: classes });
App.ClassesView.create({ controller: classesController });

jQuery.getJSON("urltoapi", function(json) {
      classes.setProperties(json);
});

and my hbs in my html

<script type="text/x-handlebars"  data-template-name='classDates'>

<h3></h3>
<ul>
{{#each view.classes}}
<li>
<div> <a {{bind-attr href=classLink}}> {{class}} {{type}} Class {{branch}} {{startmdy}}</a></div>
<div> <a {{bind-attr href=typeLink}}> More {{class}} {{type}} Class Dates</a></div>
</li>
{{/each}}
</ul>
</script>

I realize the hbs may not be exactly right or there might be a better way to do this but I am simply doing this to test my understanding so any hints or suggestions are greatly appreciated!

Answer 1

Using the Ember workflow you define a route, the route supplies the model, connects the model to the controller. This is a super basic workflow description

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('class');
});

App.Class = Ember.Object.extend();

App.ClassController = Ember.ObjectController.extend({
  hello: 'world'
});

App.ClassRoute = Em.Route.extend({
  model: function(){
    return jQuery.getJSON("urltoapi", function(json) {
      return App.Class.create(json);
    }); 
  }
});

Example: http://emberjs.jsbin.com/OxIDiVU/1170/edit