Exemple de motif knockoutjs pour les applications multi-vues

Question

Je construis une application qui contient deux vues complexes, sensiblement différentes (mais avec certains composants partagés). Une vue permet à l'utilisateur d'exécuter des requêtes et de consulter les résultats de la recherche, et l'autre vue donne un aperçu de l'activité récente. Un exemple connexe pourrait être une application PIM qui possède un écran de courrier électronique et un écran de contacts. Les deux ensembles d'opérations sont assez différents, et pourtant il existe aussi des similitudes structurelles entre eux. En construisant mon application, j'ai commencé par la vue des résultats de la recherche. Je dois maintenant créer la deuxième vue et je m'interroge sur les meilleures pratiques pour organiser le code.

Dois-je créer un objet distinct (modèle de sous-vue, je suppose) pour chaque "vue" de l'application et passer de l'une à l'autre avec des liaisons if/ifnot ? L'un des points communs entre les vues est que chacune d'entre elles comporte une liste d'objets que l'on peut faire défiler, filtrer et mettre en page. Dois-je essayer d'éliminer les différences entre les listes afin d'avoir une interface commune de tri/filtrage, ou dois-je simplement créer deux interfaces parallèles qui ne partagent que mes liaisons personnalisées ?

Merci,

Gene

Answer 1

Il y a plusieurs directions que vous pouvez prendre avec celui-ci.

Une option consiste à appeler ko.applyBindings avec des modèles de vue distincts contre des éléments DOM séparés comme :

var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };

ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));

http://jsfiddle.net/9abgxn8k/

Dans ce cas, il faut s'assurer que les éléments ne sont pas des ancêtres les uns des autres (on ne veut pas lier deux fois quelque chose).

Une autre option consiste à utiliser des modèles de vues secondaires :

var subModelA = { name: "Bob" };
var subModelB = { price: 50 };

var viewModel = {
  subModelA: { name: "Bob" },
  subModelB: { price: 50 }
};

ko.applyBindings(viewModel);

Dans cette méthode, vous utiliseriez alors with sur les zones que vous souhaitez afficher avec chaque modèle de vue. Vous pouvez contrôler la visibilité à l'aide de drapeaux sur les sous-modèles ou sur le modèle supérieur.

Une autre option que j'aime bien est de donner à vos "vues" un peu de structure et de faire quelque chose comme ça :

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};

var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};

var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);

http://jsfiddle.net/rniemeyer/PctJz/