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

How to do UIView nonstop flip animation

iphone objective-c animation uiview flip

I want to get an effect of a UIView doing 360 degree rotation around the Y axis without stopping.

Django 1.6: Order objects by boolean and likes

python django sorting

I have a doctors model where I'm displaying doctor objects based on highest likes. I have a boolean field for every doctor if that doctor is sponsored or not. I want to show the sponsored doctors f...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.