[TIMOB-17147] IOS: ScrollableView: cacheSize property does not work when the view has a child view component

// window
var win = Ti.UI.createWindow({
    title: 'TEST',
    backgroundColor: '#ffffff'
});
 
 
// returns array of remote images (from kitchensink)
function getPhotos() {
    var data = [];
    var baseUrl = 'http://placehold.it/';
    var imageUrl;
    for (i=30;i<40;i++){
        for (j=30;j<40;j++){
            imageUrl = baseUrl+i+'x'+j;
            data.push(imageUrl);
        }
    }   
    return data;
}
 
 
// load event for remote image
function img_load(e) {
    Ti.API.info('Loaded remote image ' + e.source.id + ': ' +e.source.image);
}
 
 
// postlayout event for view
function view_postlayout(e) {
    Ti.API.info('Post-layout ' + e.source.id);
}
 
 
// scrollable view with set cache size set to 3
var pager = Ti.UI.createScrollableView({
    cacheSize: 3
});
 
 
// assemble and open
win.add(pager);
win.open();
 
 
//
// TEST CASE SELECTOR (1, 2, 3 or 4)
//
var TEST_CASE = 1;
 
 
// simulate 2s delayed xhr call to bind scrollable view with data
setTimeout(function() {
     
    var photos = getPhotos(),
        pages = []; 
     
    // TEST CASE BRANCH
    if (TEST_CASE == 1)
    {
        // CACHESIZE WORKS HERE: ONLY 3 VIEWS ARE LOADED
         
        // load empty container views
        for (var i = 0; i < photos.length; i++)
        {   
            // container view
            var cont = Ti.UI.createView({ id: i, width: 300, height: 300, backgroundColor: 'red' });
            cont.addEventListener('postlayout', view_postlayout);
             
            // add container views to list
            pages.push(cont);
        }       
    }
    else if (TEST_CASE == 2)
    {
        // CACHESIZE WORKS HERE: ONLY 3 IMAGES ARE LOADED
         
        // load imageviews directly (no container view)
        for (var i = 0; i < photos.length; i++)
        {   
            // image
            var img = Ti.UI.createImageView({ id: i, image: photos[i], width: 200, height: 200 });
            img.addEventListener('load', img_load);
             
            // add imageview to list
            pages.push(img);
        }           
    }
    else if (TEST_CASE == 3)
    {
        // CACHESIZE DOES NOT WORK HERE: ALL CONTAINERS AND CHILD REMOTE IMAGES ARE LOADED AT ONCE
         
        // load imageviews inside a container view
        for (var i = 0; i < photos.length; i++)
        {   
            // image view
            var img = Ti.UI.createImageView({ id: i, image: photos[i], width: 200, height: 200 });
            img.addEventListener('load', img_load);
             
            // container view
            var cont = Ti.UI.createView({ id: 'container '+i, width: 300, height: 300, backgroundColor: 'blue' });
            cont.addEventListener('postlayout', view_postlayout);
            cont.add(img);
             
            // add container to list
            pages.push(cont);
        }       
    }
    else if (TEST_CASE == 4)
    {
        // CACHESIZE DOES NOT WORK HERE: ALL CONTAINERS AND CHILD VIEWS ARE LOADED AT ONCE
         
        // load view inside a container view
        for (var i = 0; i < photos.length; i++)
        {   
            // child view
            var child = Ti.UI.createView({ id: 'child '+i, width: 200, height: 200, backgroundColor: 'red' });
            child.addEventListener('postlayout', view_postlayout);
             
            // container view
            var cont = Ti.UI.createView({ id: 'container '+i, width: 300, height: 300, backgroundColor: 'blue' });
            cont.addEventListener('postlayout', view_postlayout);
            cont.add(child);
             
            // add container to list
            pages.push(cont);
        }       
    }
     
    // bind pages to scrollable view
    pager.applyProperties({
        views: pages,
        currentPage: 0
    });
     
     
}, 2000);