`scrollable` not working for dynamically inserted list item from Javascript

[itree]

Scrollable list works when the list is a static list. However, if the <li> is dynamically inserted into the <ul> in tt.EVENTS.PAGE_START the list won't scroll beyond the last item of the statically created list.

Below are the example js code and html. Please let us know how to make dynamically generated list scrollable. Thanks.

tt.on(tt.EVENTS.PAGE_START, 'home', function() {
  console.log("I'm on the home page!");

  for(var i = 0; i<=100; i++){
    console.log(i);
    var li = document.createElement('li')
    li.innerHTML = i + ' akdsfj kadsfj';
    li.setAttribute(
      'class',
      'topcoat-list__item'
    )
    li.setAttribute(
      'data-rel',
      'buttonExample'
    )

    var span = document.createElement('span')
    span.setAttribute(
      'class',
      'chevron'
    )
    li.appendChild(span);
    $('#demoList').append(li)
  }

});

<div class="content scrollable" data-scroll-x="false" data-scroll-y="true"> <!-- containers with the class scrollable are automatically hooked into iscroll -->

        <div class="topcoat-list__container">
            <ul id="demoList" class="topcoat-list list">
                 <li class="topcoat-list__item" data-rel="buttonExample">
                    <span class="formItem">Buttons</span><span class="chevron"></span><span class="count"></span>
                </li>


           </ul>
</div>
</div>

[itree]

Also just realize that topcoat-touch is using iscroll

Seems like this is the thing to do.
http://iscrolljs.com/#refresh

However, all that is hidden from us. Would good to know the preferred way to resize the scroll in topcoat-touch
thanks.

[itree]

Ok I figured it out in a hackaish way. It would be good to do it in topcoat-touch documentation to refresh the scrollable/iscroll object

// call the code below at end of loop
setTimeout(function () {
  var myScroll = new IScroll('.content');
  myScroll.refresh();
}, 0);