CODEWITHSUNDEEP
asp.net-mvcjquery-mobileknockout.js
JD.
JD.

Reputation: 15551

Knockout and JQueryMobile binding error with templates

With Asp.net MVC, I have two views:

First view:

<div data-role="listview" data-theme="g" id="subcategorieslistview">
<ul data-bind="template: { name: 'subcategory-template', foreach: subcategories }" id="subcategories">
    <script type="text/html" id="subcategory-template">
     <li data-role="button" data-icon="arrow-r" data-iconpos="right">
       <a data-bind="attr : { title : name, categoryid : categoryId, lazyloaddescriptor : lazyLoadDescriptor}"><label data-bind="text: name"></label></a>
     </li>
   </script>        
</ul>


<script type="text/javascript">
   $(document).one("pageinit", function () {
      <!-- Ajax load of view model --->
</script>

Second view:

<div data-role="listview" data-theme="g" id="archivecontainerslistview">
<ul data-bind="template: { name: 'archivecontainers-template', foreach: archivecontainers }" id="archivecontainers">
    <script type="text/html" id="archivecontainers-template">
        <li data-role="button" data-icon="arrow-r" data-iconpos="right">
            <span data-bind="text: name"></span>
            <span data-bind="text: synopsis" class="ui-li-count"></span>
        </li>
    </script>        
</ul>


<script type="text/javascript">
   $(document).one("pageinit", function () {
      <!-- Ajax load of view model --->
</script>

When I go to the first view, the templating works fine. I then move to the second view and the templating once again is working as expected.

However, when I hit the back button to go back to the first view, I get an error in knockout.js:

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: synopsis is not defined;

The field synopsis is on the second view and by examining the DOM I see both pages loaded where as I expected the second page to be removed from the DOM (not sure if the error is preventing the second page from being removed from the DOM).

It seems that because the second page is in the DOM when the first page is activated the binding seems to be kicked off in the second page even though the second page is not shown. Not sure if this is correct.

Is there anything in Jquery mobile or KnockOut to somehow remove the binding from the second page so that I can avoid this error?

Upvotes: 1

Views: 564

Answers (1)

Jim G.
Jim G.

Reputation: 15373

Is there anything in Jquery mobile or KnockOut to somehow remove the binding from the second page so that I can avoid this error?

Yes.

Have you tried calling Knockout's cleanNode() method to remove the binding from the second page?

Upvotes: 1

Related Questions