9
votes

Comment passer des données (élément sélectionné) sur la vue détaillée composée Durandal?

J'ai commencé à utiliser (à partir de, il y a quelques heures) Durandal avec l'espoir de gérer les vues et de permettre la composition Dans une seule page - l'approche précédente, également en utilisant Knockout, devait trop se manifester pour maintenir dans un fichier HTML gras.

J'ai installé / configurer Durandal et je peux créer des vues et des images de vue - Cependant, je ne sais pas comment obtenir des données dans la vue de la vue à utiliser comme base > Pour la nouvelle viewModel.

Par exemple, j'ai une "barre de navigation de gauche" pour la sélection d'éléments - lorsqu'un élément est sélectionné, il met à jour un "élément sélectionné" observable dans le modèle actuel, mais il devrait aussi charger le bon "Vue détaillée" dans la droite: Parce que partie de la raison pour essayer Durandalal pour séparer les composants / vues, cela devrait provenir d'une vue distincte / viewmodel.

J'ai lu via la documentation, y compris composition et à l'aide de la composition , mais la méthode de comment passer aux données sur le point de vue n'est pas claire pour moi . Il semble que je puisse utiliser une vue avec un modèle existant (dans la vue actuelle / portée), mais j'aimerais vraiment simplement utiliser certaines des données de modèle actuelles (c'est-à-dire une carte d'identité) pour récupérer les données de modèle "réelles" dans la vue.

Ainsi, mes questions;

  • Comment réussir les données initiales, telles que "l'élément sélectionné" à une vue de vue gérés? Je préférerais utiliser le déclaratif "Composer:" Reliure, comme c'est ce que c'est ce que fait ko .. ko.

  • est cette notion d'avoir / transmettre des données initiales correctes ici, ou y a-t-il une meilleure alternative? J'ai vu "ActiveItem" vaguement mentionné, mais les détails / l'USEAGE me fait grossir.


    Mise à jour 1: J'ai trouvé Comment pouvons-nous partager les données entre Vues / transmettez la vue de données pour afficher , mais les réponses manquent de mise en œuvre réelle. J'aimerais vraiment ne pas partager le point de vue entre le parent-enfant (paires de vues distinctes / viewmodel) et j'aimerais utiliser une approche déclarative (aucun événement). Le parent n'a pas besoin de savoir sur l'enfant, mais l'enfant doit être nourri des données du parent.


    Mise à jour 2: Au-dessus de ce qui précède, j'avais indiqué que le "ID" était nécessaire, je voudrais une approche qui fonctionne avec tout objet de base , que le routeur n'est pas nécessairement approprié. La liaison profonde n'est pas une préoccupation dans ce cas. Cependant, si vous sentez que le routeur est la manière dont pour approcher cela, postez un argument de telle (avec des détails) comme une réponse et je lui donnerai au moins un vote up-vote.


0 commentaires

3 Réponses :


3
votes

Si vous regardez le code source de la brise, vous pouvez voir un exemple d'une approche principale détaillée.

Ils utilisent un activateur pour composer la vue enfant.

https: // github. com / IdeAflade / Breeze / BLOB / MASTER / SAMPLES / TEMPHIRE / TEMPHIRE / App / ViewModels / RESOURCEMGT.JS

Je ne sais pas si vous utilisez Breeze ou non, mais l'approche est indépendante de comment obtenez-vous les données.


2 commentaires

J'ai fini par utiliser cette approche et cela fonctionne, mais ce serait vraiment bien si compose: pourrait passer activationdata , similaire à modaldialog.show (ID, activationData ) (sans pirater le noyau) ..


Une fonctionnalité ActivationData a été ajoutée à la composition récemment. Il est transmis à la méthode Activez ViewModel, je crois.



3
votes

Il y a une grande écriture sur la façon de faire cela avec le modèle spa de John Papa pour Visual Studio par Eric Panorel ici: http://ericpanorel.net/blog/hot-towel-spa-master-detail-scenario .

En bref, vous pouvez profiter du routage dans Durandal, Et cela irait quelque chose comme ceci: p>

maître.js code> exposera un ensemble d'éléments: p> xxx pré>

maître.html code> les liera et le lien vers les détails Vue: P>

define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router'],
function(app, viewLocator, system, router) {

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Durandal app';
    app.start().then(function() {
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options.backgroundpositionClass = 'toast-bottom-right';

        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
        router.mapRoute('item/:id', 'viewmodels/item', 'Item', false);

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});


0 commentaires

0
votes

Je pense qu'il est possible de passer n'importe quel objet de base que nous le faisons avec un appel modal. ko.compose est passif; Avec le routeur Durandal, vous pouvez porter vos données à l'endroit où vous aimez. Jetez un oeil à mon Travailler dans cette réponse et aidez à effectuer.


0 commentaires