How do I initialize list.js after a dynamically-created list is rendered?

Question

Sadly, list.js isn't filtering my list at all. I'm assuming it's because the elements are not in the DOM when the javascript is called.

  var render = function(list, arr){ 
    arr.forEach(function(coder){ 
      var context = { logo:coder.logo,
                      name:coder.displayName,
                    status:coder.status,
               status_icon:coder.status_icon,
                       url:coder.url};
      var html = template(context);
      $(list).append(html);
    })
    var options = { valueNames: [ 'name' ]  };
    var hackerList = new List('hacker-list', options);
  }
  ...
  render('#all',all);
  render('#offline', offline);
  render('#online', online);

You can see in the last two lines, where I am attempting to call the code after forEach is finished appending all the elements (handlebar templates). But that is not working for me either.

Here is the surrounding HTML.

<div class='container' id='main-list'>
  <div id='hacker-list' class="">
    <ul  class="row list" >
      <li id='_all' class="btn btn-default col-xs-4 arrow_box all">All</li>
      <li id='_online' class="btn btn-default col-xs-4 online">Online</li>
      <li id='_offline' class="btn btn-default col-xs-4 offline">Offline</li>
    </ul>
  </div>
  <input class="search" />
  <div class='panel' id="all"></div>
  <div class='panel' id="online"></div>
  <div class='panel' id="offline"></div>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>

Could it be that the last line in this code is the one that is firing too early? Is this not a common problem? Doesn't seem so from searching through the questions...

Answer 1

render('#all',all);
render('#offline', offline);
render('#online', online);

In this all , offline , and online are variables. Are they set somewhere? Most likely you have an error in your console saying they are not defined if you look.

Per the documentation http://www.listjs.com/docs the second argument is options and should contain an object. Is this how you have it setup?