Knockout.js component callback after all items are loaded in foreach

I have a component in kickoutjs that creates a list of albums from facebook using javascript graph api.

How to call a function after all items are rendered?

I tried foreach: {data: items, afterRender: afterItemsLoaded}- not calling the method afterItemsLoadedfor each row after all items are rendered .

I try to use the following code:

HTML：

<h1>List: </h1>
<list></list>

Javascript：

var countOfItemLoaded = 0;

ko.components.register('list', {
    viewModel: function() {
    },
    template: '<div data-bind="foreach: {data: items, afterRender: afterItemsLoaded}"><div data-bind="text: $data"></div></div>'
});

var viewModel = function() {
    var self = this;
    self.items = ko.observableArray([]);

    $.getJSON("https://graph.facebook.com/410564482402231/albums?fields=photos,name,photos.name",  function (result) {   
            $.each(result.data,function(key, item)  {            
                self.items.push(item.name);
            });

    });


    self.afterItemsLoaded = function() {
        countOfItemLoaded = countOfItemLoaded + 1;
        alert("Loaded item " + countOfItemLoaded);
    }
};

ko.applyBindings(viewModel);

Demo in jsFiddle:

jsFiddle link