Ember WordPress test 3

January 23rd, 2014   Tagged , ,
Posted in Ember, Web Development  

To extend http://broerse.net/ember/wp2/ I added a fix for the WordPress JetPack ‘ID’. Ember uses ‘id’ by default. See:

http://broerse.net/ember/wp3/

You can download the source from http://broerse.net/ember/wp3/wp3.zip or download the Ember Starter kit from http://emberjs.com/ and replace app.js and index.html with these files:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Home</a>
        <ul class="nav">
          <li>{{#linkTo 'posts'}}Posts{{/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>
              {{#linkTo 'post' this}}{{{title}}}{{/linkTo}}
            </td></tr>
            {{/each}}
          </table>
        </div>
        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="posts/index">
    <p>Please select a post</p>
  </script>

  <script type="text/x-handlebars" id="post">
    <h1>{{{title}}}</h1>
    <h2>by {{{author.name}}} <small class='muted'>({{date}})</small></h2>

    <hr>

    {{{content.content}}}

  </script>

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.2.0.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

app.js

App = Ember.Application.create();

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

App.Post = Ember.Object.extend();

App.Post.reopenClass({
  findAll: function() {
    return Ember.$.ajax({ url: 'http://public-api.wordpress.com/rest/v1/sites/58826716/posts/?number=10', dataType: "jsonp", type: 'GET' }).then(function(data) {
      return data.posts.map(function(post) {
        post['id'] = post['ID'];
        delete post['ID'];
        return App.Post.create(post);
      });
    });
  },

  find: function(id) {
    return Ember.$.ajax({ url: 'http://public-api.wordpress.com/rest/v1/sites/58826716/posts/' + id + '/', dataType: "jsonp", type: 'GET' }).then(function(post) {
      post['id'] = post['ID'];
      delete post['ID'];
      return App.Post.create(post);
    });
  }

});

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

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

Post Links
Flux Share | Bookmark | Permalink | Trackback | Email to a Friend | Comments Off on Ember WordPress test 3


Comments

Comments are closed.