Knockoutjs de travailler avec de multiples modèles de vue

J'essaie d'obtenir knock-out js de travail avec jQueryMobile et je suis de frapper quelques problèmes lors du déplacement entre les pages.

Je voudrais essayer de garder les transitions de page dans JQM et par conséquent, je tiens à utiliser les multiples options de page (plusieurs pages définies dans un fichier html) ou de charger les pages supplémentaires dans les DOM, comme détaillé dans l'défaut AJAX comportement de la section de la documentation.

JQM Page de Documentation de Transition

J'ai deux Knockoutjs pages travaillant à la fois avec un modèle de vue sur chacun d'eux. Les deux pages de fonctionner parfaitement jusqu'à ce que je tente de les lier ensemble par le biais de JQM.

Selon page que je tente de charger, j'obtiens une erreur relative à une cartographie sur l'autre page. Je ne peux que supposer que les deux pages sont chargées dans les DOM et quand knock-out s'applique aux fixations, il est à la recherche pour les propriétés qui n'existent pas.

J'ai tenté de faire un jsFiddle pour le démontrer.

JQM - knock-out Violon

Je suis nouveau à JQM et knock-out de sorte que toute aide appréciée. Si je suis complètement la mauvaise approche alors j'aimerais que quelqu'un me pointer dans la bonne direction.

Serais-je mieux de tenter d'utiliser un ViewModel pour l'ensemble du site? Si non, comment puis-je utiliser Knockoutjs avec JQM?

Merci Jasper. Vraiment utile.....
hmmm Jasper, recherche Google m'a amené ici.
J'ai pensé lmgtfy n'est pas une façon de répondre à des questions DONC, Jasper?

OriginalL'auteur fluent | 2012-01-09

  1. 22

    Un "master" en vue de modèle pour l'ensemble du site, serait acceptable. Ensuite, vous pourriez faire quelque chose comme ceci:

    var masterViewModel = {
   viewModelOne: ...,
   viewModelTwo: ...
}

    Alternativement, vous pouvez appeler le .applyBindings surcharge d'appliquer les liaisons des éléments individuels, plutôt que l'ensemble DOM: 

    ko.applyBindings(new modelOne("Test", "One"), $("#one")[0]);
ko.applyBindings(new modelTwo("Test", "Two"), $("#two")[0]);

    Personnellement, je vous recommande la deuxième approche.

    De grandes choses. Quelles sont les implications sur les performances que je semble être la création et la reliure d'un modèle de vue qui est complètement inutile?
    Mis à jour le violon, si quelqu'un d'autre est intéressé. jsfiddle.net/npJZM/10
    Bien sûr, il y a probablement une surcharge de performance que vous n'avez pas besoin d'appliquer des liaisons sur la deuxième page jusqu'à ce que vous montrer cette page. Pour compenser cela, vous pouvez essayez d'appeler .applyBindings pour le 2ème div uniquement lors de la 2ème page de "charges".
    C'est une excellente solution, la seule difficulté est l'envoi d'une page à l'autre, certaines données
    Voir cette page, faites défiler jusqu'à "l'Activation de knock-out": knockoutjs.com/documentation/observables.html

    OriginalL'auteur Judah Gabriel Himango

  2. 1

    Je suis actuellement à l'aide de jQuery Mobile 1.3.1 et knock-out 2.2.1 et essayé de nombreuses méthodes avant de trouver un (espérons-le) solution permanente à ce problème. La partie difficile est de trouver quand pour appliquer les liaisons. Lorsque j'ai utilisé jQuery fonction ready, qui ne fonctionne pas. J'ai trouvé dans le jQM documentation de se lier à la pageinit de rappel d'événement au lieu de le document de prêt de la fonction. Cependant, cette fonction de rappel est tiré chaque fois une page est affichée pour la première fois, donc si vous avez 5 jQM pages, il pourrait être tiré 5 fois et vous êtes seulement censés appliquer KO liaisons fois.

    La solution que j'ai finalement utilisé était le suivant:

    $(document).bind('pageinit', function (e) {
    var pageId = e.target.id;

    for (var i in VIEW_MODELS) {
        var vm = VIEW_MODELS[i];
        if (pageId == vm.View) {
            ko.applyBindings(vm, document.getElementById(vm.View));
        }
    }
});

    Ce que cela est fait, c'est à chaque fois un jQM page est d'abord rendu, il recherche par le biais de mon point de vue, les modèles pour trouver le modèle de vue associés à la prochaine vue et s'applique liaisons. Puisque les pages ne sont initialisés de la première fois qu'ils sont rendus, il appliquera ko liaisons sur ce premier rendu et jamais plus.

    Jusqu'à présent cela fonctionne pour moi mais je serais curieux d'entendre les opinions des autres ou des solutions à l'aide de jQM multi-modèles de page avec knock-out.

    OriginalL'auteur Cameron Askew