Traduction de `render-function.md` #65

MachinisteWeb · 2017-06-05T09:55:56Z

Je m'attaque a ce fichier.

Signed-off-by: Bruno Lesieur <[email protected]>

sylvainpolletvillard

1ère relecture

sylvainpolletvillard · 2017-06-05T15:55:17Z

src/v2/guide/render-function.md


-<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That's where you can use the **render function**, a closer-to-the-compiler alternative to templates.</p>
+Vue vous recommande l'utilisation de templates pour adresser votre HTML dans une grande majorité des cas. Il y a des situation ou cependant vous aurez réellement besoin du pouvoir de programmation du JavaScript. C'est la que vous pouvez utiliser les **fonctions de rendu**, une alternative aux templates plus proche du compilateur.


pour adresser => pour construire

dans la grande majorité

Il y a des situations, cependant, où

need the full programmatic power of JS => besoin de toute la puissance programmatique de JavaScript

C'est là

qui est plus proche du compilateur

sylvainpolletvillard · 2017-06-05T16:00:45Z

src/v2/guide/render-function.md


-Let's dive into a simple example where a `render` function would be practical. Say you want to generate anchored headings:
+Plongeons nous dans un simple exemple ou une fonction `render` serait plus pratique. Imaginons que nous souhaitons générer des ancres de titre :


Plongeons-nous (note: pas très courant comme expression en français ; une expression plus courante est "Rentrons dans le vif du sujet" ; on peut aussi oublier l'expression et simplement dire "Voyons un simple exemple")

où

des titres ancrés / des titres avec une ancre

sylvainpolletvillard · 2017-06-05T16:08:25Z

src/v2/guide/render-function.md

@@ -63,9 +63,9 @@ Vue.component('anchored-heading', {
 })
 ```

-That template doesn't feel great. It's not only verbose, but we're duplicating `<slot></slot>` for every heading level and will have to do the same when we add the anchor element. The whole thing is also wrapped in a useless `div` because components must contain exactly one root node.
+Ce template ne semble pas génial. Il n'est pas uniquement verbeux, il duplique `<slot></slot>` dans tous les niveaux de titre et nous allons devoir refaire la même chose pour chaque élément ancre. Le plus gênant est également le fait d'entourer tous ses titres d'une `div` inutile car un composant doit contenir exactement une seul nœud racine.


when we add the anchor element => quand nous ajoutons l'élément ancre

Tout cela est également encapsulé dans une div inutile

sylvainpolletvillard · 2017-06-05T16:10:14Z

src/v2/guide/render-function.md


-While templates work great for most components, it's clear that this isn't one of them. So let's try rewriting it with a `render` function:
+Alors que les templates marche bien pour la majorité des composants, il est clair que celui là n'est pas l'un d'entre eux. Aussi essayons de ré-écrire cela avec une fonction `render` :


fonctionnent bien pour la plupart des composants

celui-là

de le réécrire avec

sylvainpolletvillard · 2017-06-05T16:14:42Z

src/v2/guide/render-function.md


-The second thing you'll have to become familiar with is how to use template features in the `createElement` function. Here are the arguments that `createElement` accepts:
+La seconde chose a laquelle vous allez devoir vous familiariser est la manière d'utiliser les fonctionnalités de template avec la fonction `createElement`. Voici les arguments que la fonction `createElement` accepte :


à laquelle

les fonctionnalités des templates

sylvainpolletvillard · 2017-06-05T22:01:52Z

src/v2/guide/render-function.md


-They're also very useful as wrapper components.  For example, when you need to:
+Ils sont également très utile en tant que composant encadrant. Par exemple, quand vous avez besoin de :


utiles

wrapper components => composants enveloppes / composants d'emballage

sylvainpolletvillard · 2017-06-05T22:02:14Z

src/v2/guide/render-function.md


- Programmatically choose one of several other components to delegate to
- Manipulate children, props, or data before passing them on to a child component
+- Programmatiquement choisir un composant parmi plusieurs autres composant pour de la délégation ou


plusieurs autres composants

sylvainpolletvillard · 2017-06-05T22:03:40Z

src/v2/guide/render-function.md


-You may wonder why we need both `slots()` and `children`. Wouldn't `slots().default` be the same as `children`? In some cases, yes - but what if you have a functional component with the following children?
+Vous vous demandez peut-être l'utilité d'avoir `slot()` et `children` en même temps. `slots().default` n'est pas la même chose que `children` ? Dans la majorité des cas, oui. Mais que faire si vous avez le composant fonctionnel suivant avec les enfants suivants ?


n'est-il pas la même chose

si vous avez un composant fonctionnel avec les enfants suivants ?

sylvainpolletvillard · 2017-06-05T22:04:39Z

src/v2/guide/render-function.md

  </p>
  <p>second</p>
 </my-functional-component>
 ```

-For this component, `children` will give you both paragraphs, `slots().default` will give you only the second, and `slots().foo` will give you only the first. Having both `children` and `slots()` therefore allows you to choose whether this component knows about a slot system or perhaps delegates that responsibility to another component by simply passing along `children`.
+Pour ce composant `children` va vous donner les deux paragraphes, `slots().default` ne vous donnera que le second, et `slots().foo` ne vous donnera que le premier. Avoir le choix entre `children` et `slots()` donc a vous de choisir ce que le composant sait à propos du système de slot ou si vous déléguez peut-être la responsabilité à un autre composant en passant simplement `children`.


manque une virgule après composant

vous permet donc de choisir

sylvainpolletvillard · 2017-06-05T22:05:33Z

src/v2/guide/render-function.md


-You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string:
+Vous serez peut-être intéresser de savoir que les templates Vue sont en fait compilé en fonctions de rendu. C'est un détail d'implémentation dont vous avez en général pas à vous soucier, mais si vous souhaiter savoir comment un template spécifique est compilé, vous pourrez trouver cela intéressant. Vous trouverez ci-dessous une petite démo utilisant `Vue.compile` pour voir en live le rendu d'une chaîne de template :


intéressé

compilés

dont vous n'avez

si vous souhaitez

MachinisteWeb

Merci beaucoup pour ta review @sylvainpolletvillard.

Je laisse l'infinitif ici car j'ai déjà mis de l'infinitif au paravent mais le présent de l'indicatif ne me dérange pas aussi je pense faire une relecture rétroactive dans ce sens afin de passer tous les ininitif au présent dans une PR dédiée. J'ouvre une issue pour ne pas zapper l'idée.

MachinisteWeb · 2017-06-12T14:15:49Z

src/v2/guide/render-function.md


 ``` js
 render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
-    // Yikes - duplicate VNodes!
+    // Erf - VNodes dupliqués !


Haha :)

https://fr.wikipedia.org/wiki/ERF#Onomatop.C3.A9e

Envie de mettre autre chose ? On dirait quoi par chez toi :)

MachinisteWeb · 2017-06-12T14:27:57Z

src/v2/guide/render-function.md

    myParagraphVNode, myParagraphVNode
  ])
 }
 ```

-If you really want to duplicate the same element/component many times, you can do so with a factory function. For example, the following render function is a perfectly valid way of rendering 20 identical paragraphs:
+Si vous souhaitez réellement dupliquer le même élément/composant plusieurs fois, vous pouvez le faire avec une fonction de fabrique. Par exemple, la fonction de rendu suivante est parfaitement valide pour faire le rendu de 20 paragraphes identiques :


Je préfère « de fabrique » pour concorder avec les autres itérations du genre même si ça ne me gène pas de voir écrit fonction fabrique plutôt que fonction de fabrique.

Comment je voyais le truc :

« factory function » : fonction de fabrique
« callback function » : fonction de rappel
« render function » : fonction de rendu

Mais effectivement « fonction fabrique » peut se rapprocher de « fonction constructeur » par exemple.

Je le change pour coller avec ton usage dans l'API j'imagine :)

MachinisteWeb · 2017-06-12T14:32:25Z

src/v2/guide/render-function.md

  return createElement('div', this.$slots.default)
 }
 ```

-And access scoped slots as functions that return VNodes from [`this.$scopedSlots`](../api/#vm-scopedSlots):
+Et accéer aux slots internes en tant que fonctions qui retourne des VNodes depuis [`this.$scopedSlots`](../api/#vm-scopedSlots) :


Je m'en remet à toi, vu que c'est toi qui l'a traduit haha !

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb · 2017-06-15T07:19:56Z

Une review supplémentaire à celle de @sylvainpolletvillard serait top. @Kocal, de la dispo dans les prochains jours ?

Kocal · 2017-06-15T09:27:42Z

Oui je suis de nouveau dispo, je vais essayer de faire les 3 reviews cet aprèm dans le train !

sylvainpolletvillard · 2017-06-15T10:00:29Z

Okay pour le paravent à l'infinitif 😛

forresst

Quelques erreurs, rien de bien méchant.
C'est du bon boulot (comme d'habitude)

forresst · 2017-06-15T10:50:43Z

src/v2/guide/render-function.md


-<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That's where you can use the **render function**, a closer-to-the-compiler alternative to templates.</p>
+Vue vous recommande l'utilisation de templates pour construire votre HTML dans la grande majorité des cas. Il y a cependant des situation ou vous aurez réellement besoin de toute la puissance programmatique de JavaScript. C'est là que vous pouvez utiliser les **fonctions de rendu**, une alternative aux templates qui est plus proche du compilateur.


des situations : manque le "s"

où : manque l'accent

forresst · 2017-06-15T11:02:21Z

src/v2/guide/render-function.md

@@ -306,19 +306,19 @@ render: function (createElement) {
 }
 ```

-This is the cost of going lower-level, but it also gives you much more control over the interaction details compared to `v-model`.
+C'est le prix à payer pour travailler à bas niveau, mais cela vous donne un meilleur contrôle sur le détail des interactions comparé à `v-model`.


à bas niveau => au plus bas niveau

forresst · 2017-06-15T11:04:51Z

src/v2/guide/render-function.md


 ``` js
 render: function (createElement) {
-  // <div><slot></slot></div>
+  // `<div><slot></slot></div>`


Pourquoi tu as une différence avec l'original ?

Quand il y a du code dans des commentaires (de code), @haeresis l'entoure de « ` » et fait une pull request au projet original.

C'est pour mieux distinguer le code et le texte dans des commentaires.

forresst · 2017-06-15T11:08:23Z

src/v2/guide/render-function.md

@@ -403,7 +403,7 @@ render (createElement) {

 ## JSX

-If you're writing a lot of `render` functions, it might feel painful to write something like this:
+Si vous écrivez beaucoup de fonctions de rendu, cela pourra vous sembler fatiguant d'écrire des choses comme ça :


Si vous écrivez beaucoup de fonctions ~~de rendu~~ render, cela pourra vous sembler ...

forresst · 2017-06-15T11:11:56Z

src/v2/guide/render-function.md


-The anchored heading component we created earlier is relatively simple. It doesn't manage any state, watch any state passed to it, and it has no lifecycle methods. Really, it's just a function with some props.
+Le composant de titre ancré que nous avons créé plus tôt était relativement simple. Il ne gère aucun état, n'observe aucun état qu'on lui passe, et il n'a pas de méthodes de cycle de vie. Non, ce n'est qu'une simple fonction avec quelque props.


avec quelques props : il manque un s à quelque

forresst · 2017-06-15T11:14:05Z

src/v2/guide/render-function.md

+- `slots`: une fonction retournant un objet de slots,
+- `data`: l'objet de données (`data`) complet passé au composant,
+- `parent`: une référence au composant parent,
+- `listeners`: (2.3.0+) un objet contenant les écouteurs d'évènement enregistrés dans le parent. C'est un simple alias de `data.on`,


data.on, : il faut supprimer la virgule

Kocal

Pas grande chose à review vu que des monstres sont passés avant :D

Bon taf comme d'hab ~

Kocal · 2017-06-15T14:21:46Z

src/v2/guide/render-function.md


-Let's dive into a simple example where a `render` function would be practical. Say you want to generate anchored headings:
+Voyons un simple exemple où une fonction `render` serait plus pratique. Imaginons que nous souhaitons générer des titres avec une ancre :


Examinons un exemple simple où

Kocal · 2017-06-15T14:36:57Z

src/v2/guide/render-function.md

-  // modifiers such as in v-on:keyup.enter are not
-  // supported. You'll have to manually check the
-  // keyCode in the handler instead.
+  // La gestion d'évènement est regroupée sous `on` cependant


d'événements

Kocal · 2017-06-15T14:38:57Z

src/v2/guide/render-function.md


 ``` js
 render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
-    // Yikes - duplicate VNodes!
+    // Erf - VNodes dupliqués !


Je dis et écris "Erf" depuis que je suis enfant, tu habites dans quel coin @haeresis ?

Kocal · 2017-06-15T14:40:10Z

src/v2/guide/render-function.md


-For the `.capture` and `.once` event modifiers, Vue offers prefixes that can be used with `on`:
+Pour les modificateurs d'évènement `.capture` et `.once`, Vue offre des préfixes pouvant être utilisé dans `on`:


être utilisés

Kocal · 2017-06-15T14:43:00Z

src/v2/guide/render-function.md


 ``` js
 render: function (createElement) {
-  // <div><slot></slot></div>
+  // `<div><slot></slot></div>`


Quand il y a du code dans des commentaires (de code), @haeresis l'entoure de « ` » et fait une pull request au projet original.

C'est pour mieux distinguer le code et le texte dans des commentaires.

MachinisteWeb · 2017-06-15T16:26:07Z

Quelques erreurs, rien de bien méchant.
C'est du bon boulot (comme d'habitude)
— @forresst

Toi tu passes après la review de @sylvainpolletvillard XD !

Merci pour vos retours, je refais une itération d'ajustement.

PS : « auparavant »

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb · 2017-06-15T16:39:57Z

Merci à vous @forresst et @Kocal !

Dès que c'est validé je merge ça. On aura l'occasion de corriger de nouveau des choses lors de relectures global ou à chaque modification de page de la part de l'original :)

Signed-off-by: Bruno Lesieur <[email protected]>

Starting render-function.md translation

662e857

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb self-assigned this Jun 5, 2017

MachinisteWeb added the Traduction en cours label Jun 5, 2017

MachinisteWeb mentioned this pull request Jun 5, 2017

Pages en cours de traduction #3

Open

MachinisteWeb added 2 commits June 5, 2017 13:16

translated to 80%

2e6c9f5

Signed-off-by: Bruno Lesieur <[email protected]>

Update website

25f0017

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb requested review from Kocal, forresst and sylvainpolletvillard June 5, 2017 15:41

MachinisteWeb added Relecture nécessaire and removed Traduction en cours labels Jun 5, 2017

Ré-aligner le nombre de ligne

b8e48ae

Signed-off-by: Bruno Lesieur <[email protected]>

sylvainpolletvillard requested changes Jun 5, 2017

View reviewed changes

MachinisteWeb commented Jun 12, 2017

View reviewed changes

Modifications suite à la review de sylvain

fdba231

Signed-off-by: Bruno Lesieur <[email protected]>

forresst reviewed Jun 15, 2017

View reviewed changes

Kocal requested changes Jun 15, 2017

View reviewed changes

Ajustement avec les retours de @kokal et @forrest

53930bd

Signed-off-by: Bruno Lesieur <[email protected]>

Commentaire passés à la trappe

cdcfa2b

Signed-off-by: Bruno Lesieur <[email protected]>

Kocal approved these changes Jun 15, 2017

View reviewed changes

sylvainpolletvillard approved these changes Jun 15, 2017

View reviewed changes

forresst approved these changes Jun 15, 2017

View reviewed changes

MachinisteWeb merged commit 2243e9a into vuejs-fr:master Jun 16, 2017

MachinisteWeb deleted the render-function branch June 16, 2017 08:42

sylvainpolletvillard added the Validé label Jun 16, 2017

sylvainpolletvillard removed the Relecture nécessaire label Jun 16, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Traduction de `render-function.md` #65

Traduction de `render-function.md` #65

MachinisteWeb commented Jun 5, 2017

sylvainpolletvillard left a comment

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

sylvainpolletvillard Jun 5, 2017

MachinisteWeb left a comment

MachinisteWeb Jun 12, 2017

MachinisteWeb Jun 12, 2017

MachinisteWeb Jun 12, 2017

MachinisteWeb commented Jun 15, 2017

Kocal commented Jun 15, 2017

sylvainpolletvillard commented Jun 15, 2017

forresst left a comment

forresst Jun 15, 2017 •

edited

Loading

forresst Jun 15, 2017

forresst Jun 15, 2017

Kocal Jun 15, 2017

forresst Jun 15, 2017

forresst Jun 15, 2017

forresst Jun 15, 2017

Kocal left a comment

Kocal Jun 15, 2017

Kocal Jun 15, 2017

Kocal Jun 15, 2017

Kocal Jun 15, 2017

Kocal Jun 15, 2017

MachinisteWeb commented Jun 15, 2017 •

edited

Loading

MachinisteWeb commented Jun 15, 2017


		<p class="tip">Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).</p><p>Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That's where you can use the render function, a closer-to-the-compiler alternative to templates.</p>
		Vue vous recommande l'utilisation de templates pour adresser votre HTML dans une grande majorité des cas. Il y a des situation ou cependant vous aurez réellement besoin du pouvoir de programmation du JavaScript. C'est la que vous pouvez utiliser les fonctions de rendu, une alternative aux templates plus proche du compilateur.


		Let's dive into a simple example where a `render` function would be practical. Say you want to generate anchored headings:
		Plongeons nous dans un simple exemple ou une fonction `render` serait plus pratique. Imaginons que nous souhaitons générer des ancres de titre :


		While templates work great for most components, it's clear that this isn't one of them. So let's try rewriting it with a `render` function:
		Alors que les templates marche bien pour la majorité des composants, il est clair que celui là n'est pas l'un d'entre eux. Aussi essayons de ré-écrire cela avec une fonction `render` :


		The second thing you'll have to become familiar with is how to use template features in the `createElement` function. Here are the arguments that `createElement` accepts:
		La seconde chose a laquelle vous allez devoir vous familiariser est la manière d'utiliser les fonctionnalités de template avec la fonction `createElement`. Voici les arguments que la fonction `createElement` accepte :


		They're also very useful as wrapper components. For example, when you need to:
		Ils sont également très utile en tant que composant encadrant. Par exemple, quand vous avez besoin de :


		You may wonder why we need both `slots()` and `children`. Wouldn't `slots().default` be the same as `children`? In some cases, yes - but what if you have a functional component with the following children?
		Vous vous demandez peut-être l'utilité d'avoir `slot()` et `children` en même temps. `slots().default` n'est pas la même chose que `children` ? Dans la majorité des cas, oui. Mais que faire si vous avez le composant fonctionnel suivant avec les enfants suivants ?


		You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string:
		Vous serez peut-être intéresser de savoir que les templates Vue sont en fait compilé en fonctions de rendu. C'est un détail d'implémentation dont vous avez en général pas à vous soucier, mais si vous souhaiter savoir comment un template spécifique est compilé, vous pourrez trouver cela intéressant. Vous trouverez ci-dessous une petite démo utilisant `Vue.compile` pour voir en live le rendu d'une chaîne de template :


		The anchored heading component we created earlier is relatively simple. It doesn't manage any state, watch any state passed to it, and it has no lifecycle methods. Really, it's just a function with some props.
		Le composant de titre ancré que nous avons créé plus tôt était relativement simple. Il ne gère aucun état, n'observe aucun état qu'on lui passe, et il n'a pas de méthodes de cycle de vie. Non, ce n'est qu'une simple fonction avec quelque props.


		Let's dive into a simple example where a `render` function would be practical. Say you want to generate anchored headings:
		Voyons un simple exemple où une fonction `render` serait plus pratique. Imaginons que nous souhaitons générer des titres avec une ancre :


		For the `.capture` and `.once` event modifiers, Vue offers prefixes that can be used with `on`:
		Pour les modificateurs d'évènement `.capture` et `.once`, Vue offre des préfixes pouvant être utilisé dans `on`:

Traduction de render-function.md #65

Traduction de render-function.md #65

Conversation

MachinisteWeb commented Jun 5, 2017

sylvainpolletvillard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Jun 15, 2017

Kocal commented Jun 15, 2017

sylvainpolletvillard commented Jun 15, 2017

forresst left a comment

Choose a reason for hiding this comment

forresst Jun 15, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kocal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Jun 15, 2017 • edited Loading

MachinisteWeb commented Jun 15, 2017

Traduction de `render-function.md` #65

Traduction de `render-function.md` #65

forresst Jun 15, 2017 •

edited

Loading

MachinisteWeb commented Jun 15, 2017 •

edited

Loading