Simple starting point for Ember.js fiddles
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: {{goalName}}<br>
{{/each}}
<br>
{{#view Ember.Button target="App.postsController" action="addPost"}}Add Post{{/view}}
{{view Ember.CollectionView contentBinding="App.goalsController" itemViewClass="App.GoalView"}}
</script>
<script type="text/x-handlebars" data-template-name="goal-view">
<br>
<h1>{{content.goalTitle}}</h1>
Per week: {{content.timesPerWeek}}<br>
This week: {{content.timesThisWeek}}<br>
</script>
JavaScript
App = Ember.Application.create({});
App.Goal = Ember.Object.extend({
goalTitle: null,
timesPerWeek: null,
timesThisWeek: function() {
return Ember.getPath('App.postsController.content').filterProperty('goalName', this.get("goalTitle")).get('length');
}.property('App.postsController.content.@each')
});
App.Post = Ember.Object.extend({
postContent: null,
goalName: null
});
App.postsController = Ember.ArrayController.create({
content: [
App.Post.create({ postContent: "went and played golf today, shot 69", goalName: "Play a round of golf" }),
App.Post.create({ postContent: "went and played golf today, shot a 70", goalName: "Play a round of golf" }),
App.Post.create({ postContent: "went to the range for an hour", goalName: "Range practice" })
],
addPost: function() {
this.get('content').pushObject(
Em.Object.create({postContent: "played more golf, shot a 72", goalName: "Play a round of golf" })
);
}
});
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",
});