Question

On the Ember MVC TodoApp there is an option “Clear all Completed”.

I’ve been trying to do a simple “Clear All”.

I’ve tried multiple things, none of them work as I expected (clearing the data, the local storage and refreshing the UI).

The ones that comes with the sample is this code below:

clearCompleted: function () {
    this.filterProperty(
            'completed', true
        ).forEach(this.removeObject, this);
},

My basic test, that I expected to work was this one:

  clearAll: function () {
            this.forEach(this.removeObject, this);
        },

Though, it’s leaving some items behind.

If I click the button that calls this function in the Entries controller a couple times the list ends up being empty. I have no clue what’s going on! And don’t want to do a ‘workaround’.

The clearCompleted works perfectly by the way.

Answer 1

The answer depends on what you really want to know– if you want to clear an ArrayProxy, as per the question title, you just call clear() on the ArrayProxy instance e.g.:

var stuff = ['apple', 'orange', 'banana'];
var ap = Ember.ArrayProxy.create({ content: Ember.A(stuff) });
ap.get('length'); // => 3
ap.clear();
ap.get('length'); // => 0

This way you’re not touching the content property directly and any observers are notified (you’ll notice on the TodoMVC example that the screen updates if you type Todos.router.entriesController.clear() in the console).

If you’re specifically asking about the TodoMVC Ember example you’re at the mercy of the quick and dirty “Store” implementation… if you did as above you’ll see when you refresh the page the item’s return since there is no binding or observing being done between the entry “controller” and the Store (kinda dumb since it’s one of Ember’s strengths but meh whatev)

Anywho… a “clearAll” method on the entriesController like you were looking for can be done like this:

clearAll: function() {
    this.clear();
    this.store.findAll().forEach(this.removeObject, this);
    }