web-dev-qa-db-fra.com

Exemple de modèle knockoutjs pour les applications à vues multiples

Je crée une application qui contient deux vues complexes, significativement différentes (mais avec des 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 dotée d'un écran de messagerie et d'un écran de contacts. Les deux ensembles d'opérations sont assez différents, et pourtant il existe également des similitudes structurelles entre les deux. J'ai commencé avec la vue des résultats de la recherche. Je dois maintenant créer la seconde et je me demande quelles sont les meilleures pratiques pour organiser le code.

Dois-je créer un objet séparé (modèle de sous-vue, je suppose) pour chaque "vue" d'application et basculer entre eux avec des liaisons if/ifnot? Un point commun entre les vues est que chacune a une liste d'objets défilable, filtrable et paginable. Dois-je essayer de prendre en compte les différences entre les listes afin de pouvoir avoir une interface de tri/filtrage commune, ou dois-je simplement créer deux interfaces parallèles qui partagent uniquement mes liaisons personnalisées?

Merci,

Gène

knockout.js
65
Gene Golovchinsky

Il y a quelques directions que vous pourriez suivre avec celle-ci.

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

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, vous voudrez vous assurer que les éléments ne sont pas des ancêtres les uns des autres (ne voulez pas lier quoi que ce soit deux fois)

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

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 ensuite les liaisons with sur les zones que vous souhaitez afficher avec chaque modèle de vue. Vous pouvez contrôler la visibilité avec des indicateurs sur les sous-modèles ou sur le modèle supérieur.

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

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/

105
RP Niemeyer