CODEWITHSUNDEEP
htmljquery-mobileknockout.js
WhatsInAName
WhatsInAName

Reputation: 724

Knockout.js, jQuery mobile conflict {Node was not found} - bug?

I am using jQuery mobile and Knockout.js to test the first example on http://knockoutjs.com/documentation/foreach-binding.html but nothing is displayed and error console of FireFox reveals this error:

Timestamp: 9/10/2012 1:13:16 PM Error: NotFoundError: Node was not found Source File: http:///kotest/Scripts/knockout-2.1.0.js Line: 46

Note that this is the latest knockout-2.1.0.js downloaded today.

The code is below:

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

I should mention that it works as expected if references to the jQuery mobile js files are deleted.

Upvotes: 0

Views: 985

Answers (2)

Judah Gabriel Himango
Judah Gabriel Himango

Reputation: 60041

Your document is not in the ready state. Since you're using jQuery mobile, you'll want to listen for the pageinit event, then apply your KO bindings in that:

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

Note that Daniel's answer suggests to use document.ready, however, that doesn't work in the jQuery mobile bits where page contents are loaded asynchronously via AJAX. Instead, you must use pageinit event.

Upvotes: 1

theforce
theforce

Reputation: 1525

Update: You can try the jQuery mobile pageinit function.

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

include a div Tag with the data-role="page" binding from jquery mobile:

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

Upvotes: 1

Related Questions