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>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="index">
  {{input type="checkbox" checked=showComputed class="toggle"}}
  Show Computed
  {{#unless showComputed}}
  <h3>Array</h3>
  <ul>
    {{#each filteredArray}}
      {{#view App.NameView}}
        {{name}}
        {{input type="checkbox" checked=isDone class="toggle"}}
      {{/view}}
    {{/each}}
  </ul>
  {{else}}
  <h3>Computed</h3>
  <ul>
    {{#each filteredComputed}}
      {{#view App.NameView}}
        {{name}}
        {{input type="checkbox" checked=isDone class="toggle"}}
      {{/view}}
    {{/each}}
  </ul>
  {{/unless}}
  </script>
​
</body>
</html>
 
App = Ember.Application.create();
​
tasks = [
  Ember.Object.create({name: 'do this thing', isDone: false}),
  Ember.Object.create({name: 'walk the dog', isDone: false}),
  Ember.Object.create({name: 'bake cookies', isDone: false}),
  Ember.Object.create({name: 'do that thing', isDone: false})
];
​
​
App.IndexController = Ember.ArrayController.extend({
  showComputed: true,
  
  // Array.filterBy creates new array forcing 'each' to rerender
  filteredArray: function(){
    return this.get('content').filterBy('isDone', false);
  }.property('content.@each.isDone'),
​
  // Ember.computed.filterBy reuses the same array so only changes Items are redendered
  filteredComputed: Ember.computed.filterBy('content','isDone', false),
  
  
  resetFlags: function(){
    tasks.forEach(function(t){t.set('isDone',false);});
  }.observes('showComputed')
});
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return tasks; 
  }
});
​
App.NameView = Ember.View.extend({
  tagName: 'li',
  logInsert: function(){
    console.log('renders "' + this.get('context.name') +'"');
  }.on('didInsertElement')
});
Output

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

Dismiss x
public
Bin info
arkadiykpro
0viewers