Exemple de modèle knockoutjs pour les applications multi-vues [fermé]

Je construis une application qui contient deux vues complexes, significativement différentes (mais avec quelques composants partagés). Une vue permet à l'utilisateur d'exécuter des requêtes et de regarder les résultats de la recherche, et l'autre vue donne un aperçu de l'activité récente. Un exemple connexe peut être une application PIM qui a un écran de messagerie et un écran de contacts. Les deux ensembles d'opérations sont très différents, et pourtant il y a aussi des similitudes structurelles entre alors. Lors de la construction de mon application, j'ai commencé à à la vue des résultats de recherche. Je dois maintenant créer le second, et je m'interroge sur les meilleures pratiques dans l'organisation du code.

Est-ce que je crée un objet séparé (modèle de sous-vue, je suppose) pour chaque application "view" et bascule entre eux avec des liaisons if/ifnot? Un point commun entre les vues est que chacune a une liste d'objets défilante, filtrable et pageable. Devrais-je essayer de factoriser les différences entre les listes afin que je puisse avoir une interface utilisateur de tri/filtre commune, ou dois-je juste créer deux interfaces parallèles qui partagent uniquement mes liaisons personnalisées?

Merci,

Gène

65
demandé sur Gene Golovchinsky 2011-12-30 10:55:27

1 réponses

Il y a quelques directions que vous pourriez aller avec celui-ci.

Une option consiste à appeler ko.applyBindings avec des modèles de vue distincts contre des éléments DOM distincts 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 voulez vous assurer que les éléments ne sont pas des ancêtres les uns des autres (ne veulent pas lier quoi que ce soit deux fois)

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

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

104
répondu RP Niemeyer 2014-11-26 12:53:31