Discussion :

[Mr-Jay]

Bonjour,

pour un projet mvc en node js utilisant le module npm griddle-react, j'ai besoin de transmettre un objet que j'ai construit dans un contrôleur vers un fichier jsx dans le quel j'ai mon script react.render (ce dernier à pour objectif de me construire un tableau dynamique avec pagination).

Ma vue est un fichier handlebar.

Voila mon objet test présent dans le contrôleur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var fakeData= [{
          "Catégorie": "Congés payés (périodes juin 2015 à mai 2016)",
          "Début": "lun 28/12/2015 matin",
          "Fin": "jeu 31/12/2015 soir",
          "Durée": "4 jours",
          "Etat": "en attente"
        }, {
          "Catégorie": "Congés payés (périodes juin 2015 à mai 2016)",
          "Début": "lun 03/08/2015 matin",
          "Fin": "jeu 21/08/2015 soir",
          "Durée": "15 jours",
          "Etat": "accepté"
        }];

La ligne dans ma vue appelant le script react

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Affichage via react :<div class="tableau" id="main"  />

Mon script react présent dans mon fichier jsx

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
React.render(
<Griddle results={fakeData} tableClassName="table" showFilter={true}
   showSettings={true} columns={["Catégorie", "Début", "Fin", "Durée","Etat"]}/>,document.getElementById('main')
);

Résultat attendu:



Est-il possible de transmettre mon objet du contrôleur vers mon fichier jsx en passant par ma vue? Ou existe-il un autre moyen?

Sinon j'ai tenté de mettre mon script entre balise <script> dans ma vue, mais griddle n'est pas reconnus.

Merci d'avance.

[Mr-Jay]

N'ayant pas trouvé le bouton permettant d'éditer mon post, je met la solution que j’ai trouvé ici.

Pour rappelle cette solution fonctionne dans le cas suivant:
On as un contrôleur, une vue et un fichier jsx et on souhaite transmettre un objet du contrôleur vers le jsx.

dans le contrôleur on construit notre objet, on le stringify puis on l'envoie avec res.render:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var data = JSON.stringify(fakeData)
res.render('mesConges', { conges: data });

Dans la vue on transmet l'objet via le value:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Test Affichage via react : <div id="main" value="{{conges}}"></div>

Dans le jsx on récupere notre value on le parse, puis on fait apelle au script griddle (ou autre traitement en fonction de votre cas):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var tab =document.getElementById("main")
var value =tab.getAttribute('value');
var listes= JSON.parse(value)

React.render(
<Griddle results={listes} tableClassName="table" showFilter={true}
   showSettings={true} columns={["Catégorie", "DateDebut", "DateFin", "Durée","Etat"]}/>,document.getElementById('main')
);

Voila je ne sais pas si ça serviras à quelqu'un mais sait-on jamais ^^