Building nbcnews.com using Ember

Amsterdam Ember.js Meetup #1

ember_amsterdamThe first Amsterdam Ember.js Meetup is scheduled for 12 March at 19:00 at Publitas.com. I like to see you there. RSVP on meetup.com.

Ember WordPress test 4

If you access a post via an URL like http://broerse.net/ember/wp3/#/posts/3787 I didn’t know how to return the post with an ‘id’ from the objects created with findAll. I ended up fetching the specific post by ‘id’ from JetPack again. With much help from ‘melc’ and StackOverflow I changed my test to this:

http://broerse.net/ember/wp4/#/posts/3787

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

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) {
    var post = this.modelFor("posts").findBy("id",parseInt(params.post_id));
    if(Em.isEmpty(post)){
      return App.Post.find(params.post_id);   
    } else {
      return post;
    }
  }
});

Ember WordPress test 3

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);
  }
});

Ember WordPress test 2

To extend http://broerse.net/ember/wp1/ I added Twitter bootstrap CSS for style and created this:

http://broerse.net/ember/wp2/

It still has a bug with returning to a :post_id . I changed it to :ID but this is probably wrong. You can download the source from http://broerse.net/ember/wp2/wp2.zip

 

 

New site: amsterdamartistic.com

Check out Inga’s new site: amsterdamartistic.com

You can now also Subscribe via Email on this site.

iPhone Voice Jam – Wayfaring Stranger (Douglas Bako Cover)

Ember WordPress test 1

jetpackAfter installing WordPress Jetpack on the broerse.net WordPress site and some config work it is possible access this json data:

http://public-api.wordpress.com/rest/v1/sites/58826716/posts/?number=4

To create an Ember site like http://broerse.net/ember/wp1/ 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/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="index">
    <ul>
      {{#each}}
      <li> {{title}} </li>
      {{/each}}
    </ul>
  </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.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.$.ajax({ url: 'http://public-api.wordpress.com/rest/v1/sites/58826716/posts/?number=4', dataType: "jsonp", type: 'GET' }).then(function(data) {
      return data.posts;
    });
  }
});

That’s all there is to it. Happy Embering!

Octonions

I just found this interesting read on Octonions, Spinors and Vectors.

On Quaternions and Octonions: Their Geometry, Arithmetic, and Symmetry .

Differential Synchronization