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

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

本文关键字：列表 初始化 js 创建 动态      更新时间：2023-09-26

可悲的是，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>

难道是这段代码的最后一行是过早触发的那行吗？这不是一个常见问题吗？从搜索问题来看似乎并非如此...

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

在这个all中，offline和online是变量。它们是否设置在某个地方？很可能您在控制台中出现错误，指出如果您查看，则未定义它们。

根据文档 http://www.listjs.com/docs 第二个参数是选项，应包含一个对象。这是您的设置方式吗？

相关文章：