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:
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:
<!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 = 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