Knockout.js，jQuery 移动冲突 {找不到节点} - 错误？答案

【问题标题】：Knockout.js, jQuery mobile conflict {Node was not found} - bug?Knockout.js，jQuery 移动冲突 {找不到节点} - 错误？
【发布时间】：2012-09-10 20:21:45
【问题描述】：

我正在使用 jQuery mobile 和 Knockout.js 测试 http://knockoutjs.com/documentation/foreach-binding.html 上的第一个示例，但没有显示任何内容，并且 FireFox 的错误控制台显示此错误：

时间戳：2012 年 9 月 10 日下午 1:13:16 错误：NotFoundError：找不到节点源文件：http:///kotest/Scripts/knockout-2.1.0.js 线路：46

注意这是今天下载的最新的knockout-2.1.0.js。

代码如下：

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
     <link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />

     <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
     <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>

     <script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    </head>
    <body>
  <h4>People</h4>

    <table>
        <thead>
            <tr><th>First name</th><th>Last name</th></tr>
        </thead>
        <tbody data-bind="foreach: people">
           <tr>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
      ko.applyBindings({
        people: [
                { firstName: 'Bert', lastName: 'Bertington' },
                { firstName: 'Charles', lastName: 'Charlesforth' },
                { firstName: 'Denise', lastName: 'Dentiste' }
            ]
      });
    </script>
    </body>
    </html>

我应该提到，如果删除对 jQuery 移动 js 文件的引用，它会按预期工作。

【问题讨论】：

标签： html jquery-mobile knockout.js

【解决方案1】：

更新： 你可以试试jQuery mobile pageinit函数。

<script type="text/javascript" >
    $(document).on('pageinit','[data-role=page]', function(){
      ko.applyBindings({
        people: [
                { firstName: 'Bert', lastName: 'Bertington' },
                { firstName: 'Charles', lastName: 'Charlesforth' },
                { firstName: 'Denise', lastName: 'Dentiste' }
            ]
      });

    });    
    </script>

在 jquery mobile 中包含一个带有 data-role="page" 绑定的 div 标签：

<div data-role="page" >
    <table>
        <thead>
            <tr><th>First name</th><th>Last name</th></tr>
        </thead>
        <tbody data-bind="foreach: people">
           <tr>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
            </tr>
        </tbody>
    </table>
</div>

【讨论】：

很抱歉，但这并没有解决问题。将 ko 放在顶部，并将 ko 代码放在文档准备函数中。得到相同的错误，但唯一的区别是，现在显示表格标题。
感谢您的反馈。我在 jquery 移动文档中找到了解决方案。它不是就绪事件，它是 jquery mobile 的文档 pageinit 事件。 jquerymobile.com/demos/1.1.1/docs/api/events.html
我已经更新了我的答案。现在应该可以了，或者查看Himango的答案。
包括
解决了这个问题。尽管我绑定到 pageinit 事件以及 Judah Himango 根据 jquery 移动文档提出的建议，但甚至不必编辑 javascript 代码。非常感谢！！

【解决方案2】：

您的文档未处于就绪状态。由于您使用的是 jQuery mobile，因此您需要监听 pageinit 事件，然后在其中应用您的 KO 绑定：

$(document).bind('pageinit', function() {
    // Use KO here
});

请注意，Daniel 的回答建议在通过 AJAX 异步加载页面内容的 jQuery 移动位中使用 document.ready，但 that doesn't work。相反，您必须使用 pageinit 事件。

【讨论】：