在 List.js 中创建链接

Question

我正在使用 List.js 生成列表（很明显），但是我无法在列表项内创建链接。

到目前为止，这是我的代码 --

<script>

  var options = {
    valueNames: [ 'title', 'description', 'lat', 'lng', 'user_sub', 'location', 'imageurl'],
    item: '<li><h3 class="title"></h3><p class="description"></p><p class="location"></p><p class="user_sub"></p></li>'
  };

  var values = JSON.parse('{{ jsonout|safe }}');

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

</script>

这创建了一个很好的列表，但是我想加入 lat 和 lng ValueNames 一起创建一个列表，通常我会做这样的事情（来自 [=28= 的示例] 我用过的地图）

'<a href=http://www.google.com/maps/place/' + data.lat+ ',' + data.lng + '/@' + data.lat + ',' + data.lng +',6z target=_blank>Get Directions</a>'

但是，由于所有项目都是在 HTML class 部分中创建的，因此这不起作用。关于如何让它工作的任何建议，或者它不是这个插件的选项？

Answer 1

在将值绑定到 List.js

之前，尝试将 JSON 数据解析为您想要的格式

   var values = JSON.parse('{{ jsonout|safe }}');
    for(var i=0; i<values.length; i++) {
        var data= values[i];
        item.link = '<a href=http://www.google.com/maps/place/' + data.lat+ ',' + data.lng + '/@' + data.lat + ',' + data.lng +',6z target=_blank>Get Directions</a>'
    }

您现在有了一个新的属性 link，可以像其他属性一样使用。

在 List.js 中创建链接

Creating Links in List.js

javascript

list.js