Test render helper

what is controller, what is model...

by Emmanuel Mie

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <div class="panel-title">
Test Ember stuff !
      </div>
    </div>

    <div class="panel-body">
        {{#each model}}
        <h5>{{title}}</h5>
        {{render "post" this}}
        {{/each}}
    </div>
    
    <div class="panel-footer">
        That's it !
    </div>
  </div>
</div>
</script>

<script type="text/x-handlebars" data-template-name="post">
<div class="well">
    <h4>{{title}}</h4>
    {{render "author" author}}
    <p>{{body}}</p>
</div>
</script>

<script type="text/x-handlebars" data-template-name="author">
    <p>
        <small><em>by {{name}}</em></small>
        <span class="badge">
            {{postCount}}
        </span>
    </p>
</script>

CSS

body {
    padding-top: 50px;
}

JavaScript

App = Ember.Application.create();

App.Author = Em.Object.extend({
    id: null,
    name: ''
});

App.Author.reopenClass({
    authors: [
        {id: 1, name: 'Foo'},
        {id: 2, name: 'Bar'},
    ],
    
    find: function(id) {
        var promise = new Em.RSVP.Promise(function(resolve, reject) {
        var authors = App.Author.authors.map(function(author_json) {
            return App.Author.create(author_json);
        });
            if ( id ) resolve(authors.findBy('id', id));
            else resolve(authors);
        });
        return promise;
    }

});

App.Post = Em.Object.extend({
    id: null,
    title: '',
    body: '',
    author_id: null,
    _author: null, 
    author: function() {
        var id = this.author_id;
        App.Author.find(id).then(function(result) {
            this.set('_author', result);
        });
        return this.get('_author');
    }.property('_author')
});

App.Post.reopenClass({
        posts: [
        {id: 1, title: 'first', body: 'blablabla', author_id: 1},
        {id: 2, title: 'second', body: 'blobloblo', author_id: 2},
        {id: 3, title: 'third', body: 'bliblibli', author_id: 1}
    ],
                     
    find: function() {
        var promise = new Em.RSVP.Promise(function(resolve, reject) {
            resolve(App.Post.posts.map(function(post_json) {
                console.log(App.Post.create(post_json));
                return App.Post.create(post_json);
            }));
        });
        return promise;
    },

    countForAuthor: function(author) {
        var posts = App.Post.posts;
        var l = posts.findBy('author', author.author_id) || []; 
        return l.length;
    }

});

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        var t = App.Post.find().then(function(result) {
            console.log(result);
            return result;
        });
        return t;
    }
});

App.AuthorController = Em.ObjectController.extend({
    
    postCount: function()...