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.

Answers


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>

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.


Need Your Help

C++ thread constructor, using new(object) creates memory leaks

c++ multithreading c++11 memory memory-leaks

I have a program that has a class, A, that I want to run in a thread. Really, it is that A is a worker and I am going to have some number of these that are running that I want to keep track of. My

QTextEdit with page break

qt text qtextedit page-break qtextdocument

I need to break in pages instead of scrolling rich text content in a QTextEdit.