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

これは、本日ダウンロードされた最新のノックアウト-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 mobile jsファイルへの参照が削除された場合、期待どおりに機能することを述べておく必要があります。

4

2 に答える 2

1

ドキュメントは準備完了状態ではありません。jQuery mobileを使用しているので、pageinitイベントをリッスンしてから、KOバインディングをその中に適用する必要があります。

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

Danielの回答では、document.readyを使用することを提案していますが、ページのコンテンツがAJAXを介して非同期に読み込まれるjQueryモバイルビットでは機能しないことに注意してください。代わりに、pageinitイベントを使用する必要があります。

于 2012-09-10T22:15:24.223 に答える
1

更新： jQuerymobilepageinit関数を試すことができます。

<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>

jquerymobileからの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 に答える