Question

I’m referring to this example

http://emberjs.com/examples/todos/

In the code they clear the list by filtering and then removing from the collection

clearCompletedTodos: function() {
    this.filterProperty('isDone', true).forEach(this.removeObject, this);
  },

Suppose I wish to apply the same filter but I want to toggle rather than remove. In other words some type of ‘Hide Done’ button. If checked it would hide all of the done tasks. If unchecked it would show all of the done tasks. How would I do this?

Answer 1

You can create something along this lines, see http://jsfiddle.net/pangratz666/rufjC/

Handlebars:

{{#each todos}}
    {{#view App.TodoView todoBinding="this" }}
        {{view Ember.Checkbox valueBinding="todo.isDone" titleBinding="todo.label" }}
    {{/view}}
{{/each}}

JavaScript:

App.TodoView = Ember.View.extend({
    hideTodosBinding: 'App.hideTodos',
    isDoneBinding: 'todo.isDone',
    isVisible: function(){
        return !(this.get('hideTodos') && this.get('isDone'));
    }.property('hideTodos', 'isDone').cacheable()
});