如何在呈现动态创建的列表后初始化list.js?

时间:2015-06-18 21:55:38

标签: javascript

可悲的是,list.js根本没有过滤我的列表。我假设它是因为调用javascript时元素不在DOM中。

  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);

您可以在最后两行中看到,在forEach完成附加所有元素(手柄模板)之后,我试图调用代码。但这对我来说也不起作用。

这是周围的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>

可能是这段代码中的最后一行是过早发射的那一行吗? 这不是常见问题吗?通过搜索问题似乎不是这样......

1 个答案:

答案 0 :(得分:0)

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

在此all中,offlineonline是变量。它们放在某个地方吗?很可能你的控制台中有一个错误,如果你看起来没有定义它们。

根据文档http://www.listjs.com/docs,第二个参数是选项,应该包含一个对象。这是你如何设置它?