Home/ Questions/Q 8844339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:27:44+00:00

I’m trying to use knockout and jquerymobile and can’t get it to work. Here’s

  • 0

I’m trying to use knockout and jquerymobile and can’t get it to work.
Here’s my code:

<!DOCTYPE html>     
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="/nw/scripts/jquery-1.8.2.js"></script>
    <script src="/nw/scripts/knockout-2.1.0.debug.js"></script>
    <script src="/nw/scripts/jquery.mobile-1.2.0.js"></script>
    <link rel="stylesheet" href="/nw/scripts/jquery.mobile-1.2.0.css" />
        <title>title</title>
</head>
    <body>
        <div>
<script type="text/javascript">
    function AppViewModel() {
        this.test = [{ "name": "noam", "age": "36" }, { "name": "yael", "age": "34"}];
    }
    $(document).ready(function () { 
        ko.applyBindings(AppViewModel());
        });
</script>
<ul data-bind="foreach: test" id="myList">
    <li>test <span data-bind="text: name"></span></li>
</ul>
        </div>
    </body>
</html>

When I run this I get the following error:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

When I comment out the jquerymobile scripts, it works.

Any help would be appriciated

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The immediate cause of the problem is the placement of the <script> block where ko.applyBindings is called. The example works as-is if you move the <script> block into the <head> tag, as follows: (also note use of pageinit event and data-role="page" attribute)

    <!DOCTYPE html>     
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <title>title</title>
  <script type="text/javascript">
    function AppViewModel() {
      this.test = [{ "name": "noam", "age": "36" }, { "name": "yael", "age": "34"}];
    }
    $(document).bind('pageinit', function () {
      ko.applyBindings(AppViewModel());
    });
  </script>
</head>
  <body>
    <div data-role="page">
      <ul data-bind="foreach: test" id="myList">
        <li>test <span data-bind="text: name"></span></li>
      </ul>
    </div>
  </body>
</html>

    Keep in mind that both jquery mobile and knockout alter the DOM, and the DOM error is symptomatic of a clash between them, where one library has moved a DOM element that the other one has subsequently tried to address.

    To get JQM and knockout to work together (which they do), you need to be quite familiar with when/how JQM makes its changes to the DOM. This page might be a good starting point.

    • 0