ScrollableViews in a ListView

$.index.open();
var lastEndIndex = 0;
 
var photos = ["/images/ic_h_bmi_2.png", "/images/ic_h_bmi_A.png", "/images/ic_h_bmi_B.png", "/images/ic_h_bmi_C.png"];
 
initView(lastEndIndex, lastEndIndex + 13);
 
function initView(start, end) {
    var dataSet = [];
    var photoViewSet = [];
    lastEndIndex = end;
    for (var j = 0; j < (end - start); j++) {
        photoViewSet = [];
 
        for (var i = 0; i < photos.length; i++) {
            var photoView = Ti.UI.createImageView({
                image : photos[i],
                width : Ti.UI.SIZE,
                height : Ti.UI.SIZE
            });
            photoViewSet.push(photoView);
        }
 
        dataSet.push({
            template : "template",
 
            scrollableView : {
                views : photoViewSet
            }
        });
    }
 
    $.listSection.appendItems(dataSet);
    $.dataListView.setMarker({
        sectionIndex : 0,
        itemIndex : $.listSection.getItems().length - 1
    });
}
 
$.dataListView.addEventListener("marker", function() {
    initView(lastEndIndex, lastEndIndex + 7);
});

<ListView id="dataListView" separatorColor="#FFF">
            <Templates>
                <ItemTemplate name="template">
                    <View bindId="main" id="main">
                        <ScrollableView bindId="scrollableView" id="scrollableView" showPagingControl="true"></ScrollableView>
                    </View>
                </ItemTemplate>
            </Templates>
            <ListSection id="listSection" ></ListSection>
        </ListView>

when i scroll a scrollableView, the some other scroolableviews will be scrolled too.

if the other scrollableview dont have any views, it will cause IndexOutOfBoundsException.

how to solve it?