Comment faire passer des données de contrôleur dans un composant et sauvegarder dans des jembres

Question

J'ai une application 2.13 qui a une route d'utilisateurs qui récupère un modèle d'utilisateur. Donc, dans le modèle des utilisateurs, je montre tous les utilisateurs récupérés. J'ai également un contrôleur d'utilisateurs qui nourrit des données à un formulaire d'édition quand un utilisateur est cliqué. J'utilise le contrôleur d'utilisateur pour le faire.

Tout le code est dans un seul modèle, mais je voudrais mettre la liste des utilisateurs de rendu et modifier le formulaire utilisateur en deux composants distincts. Disons que je crée des modèles render-single-user et edit-user. Ainsi, lorsqu'un utilisateur clique sur un utilisateur rendu à l'aide du composant render-single-user, les données de cet utilisateur doivent apparaître dans le composant dom-rendu par le composant edit-user.

Le problème est qu'un composant n'a pas accès au modèle de la route ou au magasin de l'application.

Je serais reconnaissant si quelqu'un me dirait comment passer le modèle et stocker du contrôleur aux composants et également entre les composants render-single-user et edit-user. Et lorsqu'un utilisateur clique sur mettre à jour/enregistrer, les données modifiées doivent être transmises au contrôleur et enregistrer l'enregistrement dans le magasin, ce qui entraîne une demande de publication sur le serveur.

Captures d'écran attachées.

utilisateur Voir

cliquée utilisateur

Answer 1

Cette réponse s'applique aux versions 2.x.x et a été écrit à partir de 2.15.

Il semblerait que vous commenciez à utiliser Ember. Bienvenue! Je vous encourage fortement à faire le Tutorial et à lire The Guides. Ils sont un investissement - les choses iront beaucoup plus vite et seront beaucoup plus faciles pour vous après. Tout ce que je vais vous dire est disponible là-bas. Ils ne sont pas désactivables.

Dans votre itinéraire utilisateurs:

model() { 
    return this.store.findAll('users') 
} 

Dans votre contrôleur utilisateurs:

actions: { 
    consoleLogger(thingToLog) { 
    console.log(thingToLog) 
    } 
} 

données et actions sont passées de contrôleurs et les routes vers les composants. Ceci est fait à travers les modèles de guidons.

exemple générique des actions passant, le modèle et les variables à un composant:

{{some-component 
    someControllerVariable=someControllerVariable 
    mode=model 
    consoleLogger=(action "consoleLogger")}} 

Ensuite, dans votre appareil, vous pouvez utiliser l'action comme ceci:

<button {{action consoleLogger "string to log"}}>Log it</button> 

Ou l'utiliser dans votre composant js comme ceci:

this.get('consoleLogger')("string to log"); 
// this.get retrieves the function and then we call it with an argument, kind of like how you'd do someOtherFunction() in plain js 

Puisque vous avez besoin de montrer une liste d'aides, vous aurez besoin d'utiliser le each helper dans votre itinéraire:

{{#each users as |user|}} 
     {{user-list-item 
     someControllerVariable=someControllerVariable 
     user=user 
     consoleLogger=(action "consoleLogger")}} 
{{/each}} 

Lorsque l'action est utilisé dans votre appareil, vous pouvez passer des enregistrements comme arguments. Ils iront à l'action du contrôleur et c'est là que vous devriez faire vos opérations de type POST/PATCH/DELETE comme save().

Bonne chance :)