List.js 示例不起作用答案

【问题标题】：List.js example not workingList.js 示例不起作用
【发布时间】：2017-09-11 21:34:15
【问题描述】：

我正在尝试复制 List.js 页面上的示例，以创建一个新列表。我复制并粘贴了示例中的代码，但在 .js 库文件中出现错误。

代码如下：

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://listjs.com/assets/javascripts/list.min.js"></script>
<meta charset=utf-8 />
<title>Existing list</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

</head>
<body>
  <div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list"></ul>

</div>
</body>
</html>

JS：

var options = {
  valueNames: [ 'name', 'born' ],
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [{
    name: 'Jonny Strömberg',
    born: 1986
  },
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
}];

var userList = new List('users', options, values);

userList.add({
  name: "Gustaf Lindqvist",
  born: 1983
});

这是我得到的错误：

list.min.js:2 Uncaught TypeError: Cannot read property 'set' of undefined
    at Object.values (list.min.js:2)
    at f (list.min.js:2)
    at new <anonymous> (list.min.js:2)
    at o.add (list.min.js:2)
    at script.js:21

任何帮助将不胜感激。

【问题讨论】：

这里list.min.js 和list.js 是两个不同的脚本或相同的脚本，您遇到的问题是list.js，如果两者相同，请删除list.js。它工作正常。
@shivamGupta 哎呀，我的错。但是，我删除了 list.js，但仍然出现错误：list.min.js:2 Uncaught TypeError: Cannot read property 'set' of undefined at Object.values (list.min.js:2) at f (list.min.js:2) at new <anonymous> (list.min.js:2) at o.add (list.min.js:2) at script.js:21
at script.js:21 script.js 是什么？如果不需要script.js 可以评论一下试试看。
@shivamGupta 是需要的，你可以在这里查看list.js的例子：listjs.com/examples/new-list
尝试在 </body> 标签之前添加您的 script.js 脚本标签

标签： javascript html list list.js

【解决方案1】：

var options = {
  valueNames: [ 'name', 'born' ],
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [{
    name: 'Jonny Strömberg',
    born: 1986
  },
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
}];

var userList = new List('users', options, values);

userList.add({
  name: "Gustaf Lindqvist",
  born: 1983
});

<script src="http://listjs.com/assets/javascripts/list.min.js"></script>
<div id="users">
      <input class="search" placeholder="Search" />
      <button class="sort" data-sort="name">Sort by name</button>

      <ul class="list"></ul>

  </div>

【讨论】：