Durandal: meilleure façon de passer des données entre viewmodels

Question

Durandalal: quelle est la bonne façon de passer des données (paramètres) entre les images de vue si possible (sans traiter le backend).

Disons que j'ai 2 vues Vue d'ensemble et Détails Je veux que l'utilisateur klick sur un élément de liste de aperçu il prend l'identifiantde cet élément et transmettez-le à Détails ViewModel afin que je puisse commencer à travailler avec cet identifiant.

Merci pour l'aide

Answer 1

Astuce: vous voulez probablement l'approche axée sur la route. L'autre est pour des raisons d'exhaustivité.

APPROCHE DOCUMENTE DE VIEWMODEL En général, je dirais: Créez un module, appelons-les des données informatiques et injecte le module de données dans les deux viewmodels. Vue d'ensemble peut alors définir l'attribut ClickedElementID sur le module de données et les détails peuvent lire la valeur de l'attribut et l'utiliser (vous pouvez même rendre l'attribut observable, les détails sont notifiés lorsque l'attribut est modifié par aperçu). Cette approche fonctionne lorsque les deux viewModels peuvent être actifs simultanément, tandis que ma prochaine solution (préférée) ne fonctionne que si vous itinez d'une vue à l'autre, ils ne sont donc jamais actifs en même temps. Cette approche "ViewModel" est quelque chose que j'utilise personnellement pour des données communes dans l'application (vous pouvez également utiliser votre application Shellbmodel pour ces types d'attributs).

Approche axée sur route Semble être ce que vous voudriez faire de votre description de la situation. Les itinéraires définis peuvent prendre (facultatif) paramètres. Supposons que vous ayez maintenant une route 'Détails', vous pouvez le modifier vers 'Détails /: ID' (Accepte un paramètre d'identifiant, non-facultatif) ou 'Détails (/: ID)' (Accepte un paramètre d'identification, facultatif).

Vous avez besoin d'un gestionnaire d'événements un peu comme celui-ci pour cliquer sur un élément de liste:

overview.onElementClick = function (e) {
    var element = this, // The idea is that you need the clicked element for the next line of code
        koDataForElement = ko.dataFor(element);

    router.navigate('details/' + koDataForElement.id);
}

ko.datafor est une bonne aide de Knockout pour obtenir les données de la viewModel qui est liée à l'élément que vous transmettez, dans ce cas votre élément de liste. En cliquant sur CLICK, vous souhaitez naviguer vers les détails et transmettre l'identifiant de l'élément cliqué sur les détails. Que le code ci-dessus fait tout cela.

MAINTENANT VOS DÉTAILS La fonction Activate de la viewModel doit ressembler à ceci:

details.activate = function (id) {
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view!
};

Edit: Indice supplémentaire: vous pouvez également déclencher l'itinéraire avec ID directement à partir d'un lien. Supposons que votre élément de liste est enveloppé dans une balise d'ancrage, vous pouvez faire quelque chose comme ceci:

<div data-bind="foreach: myListOfElements">
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a>
</div>

bonne chance! Si ce n'est toujours pas clair, laissez-moi savoir,