List.JS - 无法读取未定义的属性“childNodes”答案

【问题标题】：List.JS - Cannot read property 'childNodes' of undefinedList.JS - 无法读取未定义的属性“childNodes”
【发布时间】：2015-12-08 13:44:19
【问题描述】：

我似乎无法弄清楚这一点。我已经尝试过 $(document).ready 并且仍然不适合我。我还尝试专门为这两个值名称创建一个 for 循环，以将结果保存到 var 并以这种方式传递。我还尝试将输入与类和 id 一起放入父 div 内部和外部进行搜索。基本上喜欢它在导航栏中。顺便说一句，使用 list.js 和 knockout.js。我使用foursquares api使用ajax请求获取我的场地。

JS：

        var options = {
        valueNames: ['name', 'category']
    };

    var userList = new List('search', options);

HTML：

<body>
<nav>
    <h1 class="formattedH1">Downtown SA,TX</h1>
    <span>
      <input type="search" placeholder="Search" class="search" id="search">
      <input type="button" class="sort searchButton" value="List"></input>
    </span>
</nav>
<div id="map" class="map"></div>
<div class="list">
    <input type="search" placeholder="Search" class="search" id="search">
    <h1>My Top 5</h1>
    <!-- Square card -->
    <div class="card" id="favViewModel" data-bind="foreach: favList">
        <div class="expand">
            <h2 class="venueName" data-bind="text:name"></h2>
        </div>
        <div class="cardSupport" data-bind="attr: {src: image()}">
        </div>
        <div class="cardSupport" data-bind="text:address">
        </div>
        <a data-bind="attr: {href: website()}">Website</a>
    </div>
    <h1>Foursquare Recommended</h1>
    <div class="card" id="recViewModel" data-bind="foreach: recommendedSpotList  ">
        <div class="expand">
            <h2 class="venueName" data-bind="text:name"></h2>
        </div>
        <div class="cardSupport" data-bind="text:location">
        </div>
        <div class="cardSupport" data-bind="text:category">
        </div>
        <div class="cardSupport" data-bind="text:rating">
        </div>
    </div>
    <script src="js/tester123.js"></script>

【问题讨论】：

标签： javascript html listjs

【解决方案1】：

我在项目的 github 页面上修复了一些 cmets 的相同问题，只要确保与示例具有相同的名称即可，一切都必须在 <div> 中，ul 必须有class 列表

这样

<div id="hacker-list">
   <ul class="list"></ul>
</div>

链接：https://github.com/javve/list.js/issues/9

【讨论】：

谢谢，我错过了 ul 元素上的列表类。让我难过了好久！
添加类“list”对我有用，其中使用 ul 列表是一个 div 容器。
另外，在定义 new List('users', options) 时，请确保您的 #users div 包含 both 输入/按钮和实际的有序/无序列表（如在 @ 987654322@主页）。

【解决方案2】：

我在浏览其他类似项目时找到了答案，现在很简单。认为它可能会帮助某人，以防他们遇到这个问题。那是因为我在进行 ajax 调用，所以我不得不在 ajax 请求中调用 ko.applybindings。绑定超出了范围，如果您认为它是有意义的，尤其是在您的请求失败时。为什么还要尝试绑定请求的值。 HTML 同上，JS ajax 请求见下文：

JS：

$.ajax({
    url: 'https://api.foursquare.com/v2/venues/explore',
    dataType: 'json',
    data: 'data',
    async: true,
    success: function(data) {

        venues = data['response']['groups'][0]['items'];

        //This is where I had to place the binding to get it to render properly.
        ko.applyBindings(new recommendedViewModel(), document.getElementById('recViewModel'));

    },
    error: function() {
        alert("An error occurred.");
    }
});

【讨论】：