Simple starting point for Ember.js fiddles

by MikeAski

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars">
    {{#each App.postsController}}<br>
      post content:  {{postContent}}<br>
       goal name:  {{goal_name}} <br>
    {{/each}}<br>
    <br>
    
    {{view Ember.CollectionView contentBinding="App.goalsController" itemViewClass="App.GoalView"}}
        
</script>

<script type="text/x-handlebars" data-template-name="goal-view">
    <h1>{{content.goalTitle}}</h1>
    Per week: {{content.timesPerWeek}}<br>
    This week: {{timesThisWeek}}<br>
</script>

JavaScript

App = Ember.Application.create({});

App.Goal = Ember.Object.extend({
    goalTitle: null,
    timesPerWeek: null

});

App.Post = Ember.Object.extend({
    postContent: null,
    goal_name: null
});

App.postsController = Ember.ArrayController.create({
  content: [
      App.Post.create({ postContent: "went and played golf today, shot 69", goal_name: "Play a round of golf" }),
      App.Post.create({ postContent: "went and played golf today, shot a 70", goal_name: "Play a round of golf" }),
      App.Post.create({ postContent: "went to the range for an hour", goal_name: "Range practice" })
  ] 
});

App.goalsController = Ember.ArrayController.create({
    content: [
        App.Goal.create({ goalTitle: 'Play a round of golf', timesPerWeek: 2 }),
        App.Goal.create({ goalTitle: 'Range practice', timesPerWeek: 3 })
]
  
});

App.GoalView = Ember.View.extend({
    templateName: "goal-view",
    timesThisWeek: function() {
        self = this;
        return App.postsController.filterProperty('goal_name', Ember.getPath(self, "content.goalTitle")).get('length');
    }.property()
});