Ember MVP - afterRender

The latest build of Ember.

by mgrassotti

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.min.js"></script>
<script src="https://raw.github.com/cmoel/tom_dale_ember_screencast/master/js/libs/ember-data.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
          <li>{{#linkTo 'posts'}}Posts{{/linkTo}}</li>
          <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
        </ul>
      </div>
    </div>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <table class="table">
            <thead>
              <tr><th>Recent Posts</th></tr>
            </thead>
            {{#each model}}
            <tr><td>
                {{view App.PostListingView}}
            </td></tr>
            {{/each}}
          </table>
        </div>
        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="posts/index">
    <p class="text-warning">Please select a post.</p>
  </script>
  <script type="text/x-handlebars" id="post-listing">
      Title: {{title}}
</script>
  <script type="text/x-handlebars" id="post">
    {{#if isEditing}}
      {{partial 'post/edit'}}
      <button class="btn" {{action 'doneEditing'}}>Done</button>
    {{else}}
      <button class="btn" {{action 'edit'}}>Edit</button>
  ...

CSS

/* Put your CSS here */
html, body { margin: 20px; }
.active { font-weight: bold; }

JavaScript

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

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

App.Router.map(function() {
  this.resource('posts', function() {
    this.resource('post', { path: ':post_id' });
  });
  this.resource('about');
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('posts');
  }
});

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return App.Post.find();
  }
});

App.PostController = Ember.ObjectController.extend({
  isEditing: false,
  edit: function() {
    this.set('isEditing', true);
  },
  doneEditing: function (){
    this.set('isEditing', false);
  }
});
App.PostsView = Ember.View.extend({
    templateName: 'posts',
    didInsertElement: function() {
        console.log("Inserted list of posts");
        Ember.run.scheduleOnce('afterRender', this, function() {
            console.log("afterRender");
        })
    },
    afterRender: function() {
        Ember.run
        console.log("Rendered list of posts");
    },
    didInsertChildElements: function() {
        if (this.get('state') == 'inDom') {
            Ember.run.scheduleOnce('afterRender', this, 'dosomething');
).observes('[]')
        }
    }

});

App.PostListingView = Ember.View.extend({
    templateName: 'post-listing',
    didInsertElement: function() {
        console.log("Inserted post");
        Ember.run.scheduleOnce('afterRender', this, function() {
            console.log("afterRender from post-listing");
        });
    },
    afterRender: function() {
        console.log("Rendered post");
    },
});

App.Post = DS.Model.extend({
  title: DS.attr('string'),
  author: DS.attr('string'),
  intro: DS.attr('string'),
  extended: DS.attr('string'),
  publishedAt: DS.attr('date')
});

App.Post.FIXTURES = [{
  id: 1,
  title: "Rails is Omakase",
  author: "d2h",
  publishedAt: new Date('12-27-2012'),
  intro: "There are lots of Ă  la carte software environments in this world. Places where...