Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="posts">
  <h1>{{pageTitle}}</h1>
  {{outlet}}
</script>
  
<script type="text/x-handlebars" data-template-name="posts/index">
  <ul>
    {{#each post in model}}
      <li>{{link-to post.title "posts.show" post}}</li>
    {{/each}}
  </ul>
</script>
<script type="text/x-handlebars" data-template-name="posts/show">
  <h1>{{model.title}}</h1>
  <pre>
    {{#if isExpanded}}
      {{model.body}}
    {{else}}
      {{truncate model.body length=20}}
    {{/if}}
  </pre>
  {{link-to "戻る" "posts.index"}}
</script>
</body>
</html>
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
 
App = Ember.Application.create();
App.Router.map(function() {
  this.resource('posts', {path: '/'}, function() {
    this.route('show', {path: '/posts/:post_id'});
  });
});
App.PostsRoute = Ember.Route.extend({
  model: function() {
    return [{
      id: 1,
      title: 'Ember.js 公式サイトの歩き方',
      body: 'Ember.js の公式サイト(http://emberjs.com/)では、まずトップページのサンプルを動かしてみるとよいでしょう。Ember.js でどんなことができるのかがざっくりわかります。'
    }, {
      id: 2,
      title: 'Ember.jsのディスカッションフォーラム',
      body: 'Ember.js についての疑問・質問・新しい提案など、Ember.js に関することが常に議論されています。  http://discuss.emberjs.com/'
    }];
  }
});
App.PostsShowRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('posts').filter(function(post) {
      return post.id === Number(params.post_id);
    })[0];
  }
});
App.PostsController = Ember.Controller.extend({
  pageTitle: 'Ember.js 関連の記事'
});
App.PostsShowController = Ember.Controller.extend({
  isExpanded: false
});
Ember.Handlebars.helper('truncate', function(value, options) {
  var length = options.hash.length;
  if (value.length > length) {
    return value.slice(0, length) + '...';
  } else {
    return value;
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x