[JQuery Mobile/Knockout]Binding probleem na navigatie

[Woy]

Ik heb een probleem met Knockout in combinatie met JQuery Mobile. Ik heb een pagina met een eenvoudige binding en een link naar een andere pagina ook met JQuery Mobile en Knockout. De pagina's los werken prima, maar als ik via de link naar de andere pagina navigeer krijg ik een JS error dat hij de bindings niet kan parsen, omdat nog niet het juiste viewmodel geladen is. Dit komt natuurlijk omdat JQuery mobile de nieuwe pagina binnen de huidige context laad, en knockout dus nog actief is.

Ik heb twee paginas ( Foo.html en Bar.html )

HTML:

<!--Foo.html-->
<div data-role="page" id="foo">
    <div data-role="content">
        <div data-bind="text: Foo"></div>
        <a href="Bar.html">Bar</a>
    </div>
</div>
<script type="text/javascript">
    $('[data-role="page"]').live('pageshow', function () {
        var viewmodel = {
            "Foo": ko.observable("Foo")
        };
        ko.applyBindings(viewmodel);
    });
</script>

en

HTML:

<!-- Bar.html -->
<div data-role="page" id="bar">
    <div data-role="content">
        <div data-bind="text: Bar"></div>
        <a href="Foo.html">Foo</a>
    </div>
</div>
<script type="text/javascript">
    $('[data-role="page"]').live('pageshow', function () {
        var viewmodel = {
            "Bar": ko.observable("Bar")
        };
        ko.applyBindings(viewmodel);
    });
</script>

Als ik nou van Foo.html via de link naar Bar.html navigeer gaat het mis en krijg ik de volgende error in mijn Chrome console

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: Bar is not defined;
Bindings value: text: Bar

Ik heb gezocht op google naar "Unable to parse bindings" en combinaties van JQuery Mobile en Knockout, maar kon geen oplossing voor dit probleem vinden.

Het kan toch niet zo zijn dat ik voor het navigeren eerst Knockout moet disablen op een of anderen manier? Heeft iemand een idee hoe ik dit op de juiste manier kan laten werken?

[pedorus]

Geen ervaring, maar dit al gezien? http://vsnomad.com/2013/0...nsitioning-between-pages/

[Woy]

Nee die had ik nog niet gevonden. Het lijkt dat ze een wat ander probleem op proberen te lossen, maar ik zal eens kijken of ik daarmee wat wijzer word.

[Mottebelke]

Het probleem is dat je pageshow functie van de Foo pagina ook wordt aangeroepen als de Bar pagina is geladen, omdat je selector alle elementen met data-role="page" selecteerd. En daarom probeert ie het Foo viewmodel te binden aan de Bar pagina.

Je kunt dit oplossen door je pageshow functies specifiek voor die pagina te zetten en door applyBindings een tweede parameter te geven die aangeeft wat de context moet zijn (oftewel, in welk DOM element de bindings moet worden gedaan):

HTML:

<!--Foo.html--> 
<div data-role="page" id="foo"> 
    <div data-role="content"> 
        <div data-bind="text: Foo"></div> 
        <a href="Bar.html">Bar</a> 
    </div> 
</div> 
<script type="text/javascript"> 
    $('#foo').live('pageshow', function () { 
        var viewmodel = { 
            "Foo": ko.observable("Foo") 
        }; 
        ko.applyBindings(viewmodel, $('#foo')[0]); 
    }); 
</script>

HTML:

<!-- Bar.html --> 
<div data-role="page" id="bar"> 
    <div data-role="content"> 
        <div data-bind="text: Bar"></div> 
        <a href="Foo.html">Foo</a> 
    </div> 
</div> 
<script type="text/javascript"> 
    $('#bar').live('pageshow', function () { 
        var viewmodel = { 
            "Bar": ko.observable("Bar") 
        }; 
        ko.applyBindings(viewmodel, $('#bar')[0]); 
    }); 
</script>

[Woy]

Bedankt voor je antwoord, het werkte eerst nog niet helemaal, maar dat kwam omdat het script buiten de page div stond, en dus niet goed ingeladen werd. Als het script binnen de page div staat werkt jouw oplossing inderdaad wel goed.