Non Persistent Backbone collection binded to ListView issue with setMarker

I have a non persistent backbone collection that is binding to a ListView. I also have a marker setup on the ListView to load more data as needed. I was wondering if someone has an improvement that could be made to make the data load more seemingly into the ListView rather than my approach.

My approach has a dataFilter function setup and triggers a 'change' event that updates the ListView. it works great, but when the marker event runs, it's choppy because the data is not being appended to the ListView. If anyone has a suggestion on how to do that with a collection, that is much appreciated.

Some sample code is below to give you a better idea.

index.xml

<Alloy>
    <TabGroup id="homeTab">
        <Tab title="model">
            <Window>
                <Label class="header" backgroundColor="{appState.color}">Model</Label>
                <Label id="counter" text="{appState.counter}" color="{appState.color}" />
            </Window>
        </Tab>
        <Tab title="collection">
            <Window>
                <Label class="header" backgroundColor="{appState.color}">Collection</Label>
                <ListView id="listView" defaultItemTemplate="default">
                    <Templates>
                        <ItemTemplate name="default">
                            <Label bindId="title" class="itemHeading" />
                        </ItemTemplate>
                    </Templates>
                    <ListSection id="section" dataCollection="heroes" dataFilter="filterFunction" >
                        <ListItem title:text="{name}" ></ListItem>
                    </ListSection>
                </ListView>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

var heroes = Alloy.Collections.heroes;
var setMarker = true;
var numberListItems = 15;
 
function filterFunction(collection) {
 
    if(setMarker) {
        $.listView.setMarker({ sectionIndex:0, itemIndex: (numberListItems - 1) });
    } 
 
    return collection.first(numberListItems);
 
}
 
$.listView.addEventListener('marker', function(e){
 
    numberListItems = numberListItems + 10;
 
    Alloy.Collections.heroes.trigger('change');
 
    setMarker = false;
});
 
heroes.trigger('change');
 
$.homeTab.open();