Ember latest Template

by mehulkar

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/beta/ember.js"></script>
<body>
  
  <script type="text/x-handlebars">
    <h2>Posts</h2>
    <ul>
    {{#each post in controller}}
      <li>{{post.order}} - {{post.title}}</li>
    {{/each}}
    </ul>
      <button {{action 'replaceContent' }}>Click me</button>
  </script>

</body>

CSS

ul {
    height: 100px;
    border: solid 1px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('content', controller.get('contentOne'));
    }
});
 

App.ApplicationController = Ember.ArrayController.extend({
    sortProperties: ['order'],
    arrangedContent: Em.computed.sort('content', 'sortProperties'),
    
    contentOne: [
            Em.Object.create({ title: 'green', order: 4}),
            Em.Object.create({ title: 'pink', order: 5})
    ],
    
    contentTwo: [
            Em.Object.create({ title: 'red', order: 3}),
            Em.Object.create({ title: 'blue', order: 2}),
            Em.Object.create({ title: 'yellow', order: 1})
    ],
    
    actions: {
        replaceContent: function() {
            if (this.get('content') == this.get('contentOne')) {
                newContent = this.get('contentTwo');
            } else {
                newContent = this.get('contentOne');
            }
            this.set('content', newContent);
        }
    }
})