0

我正在使用 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>

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

4

2 回答 2

1

更新： 您可以尝试 jQuery 移动 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>
于 2012-09-10T21:09:26.873 回答
1

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

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

请注意，丹尼尔的回答建议使用 document.ready，但是，这在通过 AJAX 异步加载页面内容的 jQuery 移动位中不起作用。相反，您必须使用 pageinit 事件。

于 2012-09-10T22:15:24.223 回答