Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="foos">
  {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="foos/index">
  <ul>
  {{#each model.list}}
    {{#each itemController='pollItem'}}
      foo bar 
    {{/each}}  
  {{/each}}

   </ul>
</script>
<script type="text/x-handlebars" data-template-name="foos/show">
  {{link-to 'Show All' 'foos'}}
  <div>First name: {{firstName}}</div>
  <div>Last name: {{lastName}}</div>
  <div>Votes: {{votes}}</div>
</script>

<script type="text/x-handlebars" data-template-name="x-vote">
    Vote: {{votes}} <button {{action 'vote-up'}}>up</button> <button {{action 'vote-down'}}>down</button>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.Router.map(function() {
    this.resource('foos', { path: '/' }, function() {
        this.route('show', { path: '/:id' });
    });
});

var FIXTURE = {
    title: "ember can be challenging!",
    list: [ {foo: "bar"}, {foo: "bar"}, {foo: "bar"}]
 }

App.ApplicationController = Ember.Controller.extend({
    needs: ['tracker'],
    logUrl: function() {
        this.get('controllers.tracker').pathChanged(this.get('currentPath'));
    }.observes('currentPath')
});

App.FoosRoute = Ember.Route.extend({});

App.FoosIndexRoute = Ember.Route.extend({
    model: function() {
      return FIXTURE;
    }
});

App.FoosShowRoute = Ember.Route.extend({
    model: function(params) {
      return FIXTURE.findBy('id', parseInt(params.id, 10));
    }
});

App.TrackerController = Ember.Controller.extend({
    pathChanged: function(currentPath) {
        // log your path change
        //alert('logging ' + currentPath);
    },
    trackVote: function(name, votes) {
        // log your votes
        alert(name + ' has ' + votes + ' votes');
    }
});

App.PollItemController = Ember.ObjectController.extend({
    needs: ['tracker'],
    
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName'),
    
    logOnVoted: function() {
        this.get('controllers.tracker').trackVote(this.get('fullName'), this.get('votes'));
    }.observes('votes')
});

App.XVoteComponent = Ember.Component.extend({
    templateName: 'x-vote',
    votes2: 0,
    actions: {
        'vote-up': function() {
            this.incrementProperty('votes2');
        },
        'vote-down': function() {
            if(this.get('votes2') > 0) {
                this.decrementProperty('votes2');
            }
        }
    }
});