Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="//builds.emberjs.com/tags/v1.7.0/ember.js"></script>
  <script src="//builds.emberjs.com/tags/v1.0.0-beta.9/ember-data.js"></script>
  <title>JS Bin</title>
</head>
<body>
  
  <script type="text/x-handlebars" data-template-name="index">
    
    <h3>Posts</h3>
​
    <label>
      {{input type="checkbox" checked=displayAuthor}} Display author
    </label>
    
    {{#if displayAuthor}}
​
      <div class="list-group">
        {{#each posts}}
          <div class="list-group-item">
            <span class="pull-right">
              <span class="text-muted">by</span> {{author.name}}
            </span>
            {{title}}
          </div>
        {{/each}}
      </div>
​
    {{else}}
​
      <div class="list-group">
        {{#each posts}}
          <div class="list-group-item">
            {{title}}
          </div>
        {{/each}}
      </div>
​
    {{/if}}
    
  </script>
    
  <script type="text/x-handlebars">
    <div class="container">
    
      <p>
        Keep Ember Inspector "Render Perfomance" tab open and watch render times
        when checking and unchecking "Display author".
      </p>
​
      {{outlet}}
​
      <p>
        <span class="label label-info">Note</span> Ember Inspector only works when
        code is run in separate tab/window.
      </p>
      
    </div>
  </script>
  
</body>
</html>
​
 
var App = Em.Application.create();
    
App.User = DS.Model.extend({
  name: DS.attr('string')
});
​
App.Post = DS.Model.extend({
  title: DS.attr('string'),
  author: DS.belongsTo('user')
});
​
App.IndexController = Em.Controller.extend({
​
  displayAuthor: false,
​
  posts: function() {
    return this.get('store').all('post');
​
  }.property(),
​
  displayDidChange: function() {
​
    // Here data is always pushed into store to simulate server response to a search,
    // page change, etc.
​
    // This forces Ember Data to rewire models (discarding computed properties 
    // cached results).
​
    this.get('store').pushPayload('post', {
      posts: [
        { id: "1", title: "Lorem ipsum dolor sit amet", author: "1" },
        { id: "2", title: "Consectetur adipiscing elit", author: "1" },
        { id: "3", title: "Nullam quis eros efficitur enim ultrices", author: "1" },
        { id: "4", title: "Vel convallis sodales", author: "2" },
        { id: "5", title: "Erat risus consectetur massa", author: "1" },
        { id: "6", title: "In euismod velit turpis nec magna", author: "1" },
        { id: "7", title: "Nullam sollicitudin consequat eros a congue", author: "2" },
        { id: "8", title: "Duis sit amet nulla vel sapien venenatis iaculis", author: "1" },
        { id: "9", title: "Vel semper nibh. Morbi scelerisque ipsum", author: "1" },
        { id: "10", title: "Vivamus eleifend arcu ut nisl fringilla egestas", author: "2" }
      ],
      users: [
        { id: "1", name: "root" },
        { id: "2", name: "someone" }
      ]
    });
​
  }.observes('displayAuthor').on('init')
​
});
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers