Traduction de `component-edge-cases` #130

sylvainpolletvillard · 2018-04-21T17:58:06Z

No description provided.

MachinisteWeb

Génial ! Merci Sylvain !

Quelques broutille. Parfait comme d'hab

MachinisteWeb · 2018-04-23T06:49:28Z

src/v2/guide/components-edge-cases.md


 ```js
 this.$refs.usernameInput.focus()
 ```

-When `ref` is used together with `v-for`, the ref you get will be an array containing the child components mirroring the data source.
+Quand `ref` est utilisé conjointement avec `v-for`, la ref que vous obtenez sera une `Array` contenant les composants enfants reflétant les données source.


la ref ou la référence

C'est jolie une Array :)

Mais on met un Array pour un tableau. J'ai bien compris que puisque c'est une référence, par abus de langage ont peut dire une référence Array. Mais même dans ce cas c'est étrange car je dirais une référence à un Array :s

la question n'a jamais été tranchée puisque les noms anglais n'ont pas de genre. On trouve les deux sur le net, selon ce que les gens ont en tête derrière. Toi c'est un tableau, moi c'est une liste. Mais OK pour uniformiser avec "un" Array

MachinisteWeb · 2018-04-23T06:55:19Z

src/v2/guide/components-edge-cases.md


-Earlier, when we described [Accessing the Parent Component Instance](#Accessing-the-Parent-Component-Instance), we showed an example like this:
+Précédemment, quand nous avons décrit l'[accès à l'instance de composant parente](#Accessing-the-Parent-Component-Instance), nous avons montré un exemple comme ceci :


#Acceder-a-l’instance-de-composant-parente

MachinisteWeb · 2018-04-23T06:58:45Z

src/v2/guide/components-edge-cases.md


-<p class="tip">However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as <a href="#Accessing-the-Root-Instance">using <code>$root</code></a> for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like <a href="https://github.com/vuejs/vuex">Vuex</a> instead.</p>
+<p class="tip">Cependant, il y a des inconvénents à l'injection de dépendances. Cela vient entériner la manière dont les composants sont actuellement organisés dans votre application, rendant plus difficile le remaniement de code. De plus, les propriétés fournies avec `provide` ne sont pas réactives. Cela a été intentionnellement conçu de cette façon, car les utiliser pour créer un espace de stockage global est tout aussi peu évolutif que <a href="#Accessing-the-Root-Instance">d'utiliser <code>$root</code></a> dans le même but. Si les propriétés que vous voulez partager sont spécifiques à votre application et non génériques, ou si jamais vous voulez mettre à jour des données fournies par des ancêtres, alors c'est un signe que vous avez probablement besoin d'une réelle solution de gestion d'état telle que <a href="https://github.com/vuejs/vuex">Vuex</a> à la place.</p>


#Acceder-à-l’instance-de-composant-parente

MachinisteWeb · 2018-04-23T07:01:49Z

src/v2/guide/components-edge-cases.md


-<p class="tip">Note that Vue's event system is different from the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>. Though they work similarly, <code>$emit</code>, <code>$on</code>, and <code>$off</code> are <strong>not</strong> aliases for <code>dispatchEvent</code>, <code>addEventListener</code>, and <code>removeEventListener</code>.</p>
+<p class="tip">Notez que le système d'événements de Vue est différent de celui de <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">l'API EventTarget</a> du navigateur. Bien qu'ils fonctionnent de façon similaire, <code>$emit</code>, <code>$on</code>, et <code>$off</code> ne sont <strong>pas</strong> des alias pour <code>dispatchEvent</code>, <code>addEventListener</code>, et <code>removeEventListener</code>.</p>


https://developer.mozilla.org/fr/docs/Web/API/EventTarget

MachinisteWeb · 2018-04-23T07:04:39Z

src/v2/guide/components-edge-cases.md


 ``` js
 name: 'stack-overflow',
 template: '<div><stack-overflow></stack-overflow></div>'
 ```

-A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
+Un composant comme ci-dessus résultera en une erreur « Taille maximale de la pile dépassée », donc assurez-vous de rendre conditionnelle l'invocation récursive (p.ex. avec un `v-if` qui sera `false` à la fin).


habituellement ont met « par ex. » dans les docs de Vue. Sinon cette expression à un esppace : « p. ex. » : https://fr.wiktionary.org/wiki/p._ex. (merci, je ne connaissais pas ce raccourci).

MachinisteWeb · 2018-04-23T07:08:04Z

src/v2/guide/components-edge-cases.md


 ``` js
 beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
 }
 ```

-Or alternatively, you could use Webpack's asynchronous `import` when you register the component locally:
+Ou comme alternative, vous pouvez utiliser l'`import` asynchrone de Webpack lorsque vous inscrivez le composant localement :


Non, j'ai vérifié, c'est intentionnel de garder la majuscule : vuejs#1552 (comment)

Oui je sais qu'en version original Webpack garde la majuscule. Pour npm, il souhaite également conserver NPM. Je crois que sa règle c'est le terme qu'il pense le plus utilisé selon des critères trop arbitraires.

— vuejs#990

En tout cas en FR, notre règle c'est toujours utilisé la syntaxe de la documentation officielle. Node.js (pas de Node.JS), npm (pas de Npm ou NPM), GitHub (pas de Github), Webpack (pas webpack), SystemJS pas Sytem JS, etc.

Du coup dans toutes nos documentations FR, et tu peux vérifier, tu trouverras webpack et npm. Si tel n'est pas le cas « c'est une erreur ».

Rien de dramatique non plus encore une fois, juste une histoire de consistence.

Du coup ton avis sur ce billet m'intéresserait bien :)
— https://www.linkedin.com/pulse/d%C3%A9veloppeurs-marketeurs-respectez-les-noms-des-bruno-lesieur/

Je vote pour garder les choix d'origine de l'auteur, ce n'est pas aux traducteurs de prendre ce genre de décisions.

Ton point a été entendu. Je souhaiterais plus d'avis sur la question.

Ma position est inverse. Je pense que c'est le travail des traducteurs de « s'entendre » sur ce genre de décision. Je trouve important et respectueux d'utiliser un terme tel qu'il a été créé. Il n'y a rien de moins non professionnel que de voir le mot « Javascript » ou « Jquery » au lieu de « JavaScript » ou « jQuery » sous prétexte qu'on ne met pas de majuscule dans un mot, ou qu'un mot commence forcément par une majuscule.

Il n'y a aucune raison pertinente de mettre une majuscule à webpack sans en mettre une à jQuery sinon l'autorité de la EN. Eu égard aux heures que nous passons à maintenir une traduction, je pense que ces points sont discutables. C'est d'ailleurs pour cela que nous en avons discuté avec Chris et que nous sommes tombé d'accord sur le compromis de conserver leur façon de faire dans leur documentation, et de choisir la notre dans notre documentation.

Choisir de maintenir les casses de la documentation EN étant un choix possible et non discuté actuellement, je te laisse ouvrir le débat.

En attendant, ce sera webpack (pas pour te faire chier mais parcequ'on l'a écrit comme ça partout (pour le moment donc :D)). Mais si c'est en dehors de tes convictions personnelles, je peux me charger de la modif pour toi.

oui je vais pas me battre pour une broutille pareille mais je veux bien que tu fasses ces modifs toi-même, comme ça je ne suis pas associé à cette décision

MachinisteWeb · 2018-04-23T07:08:39Z

src/v2/guide/components-edge-cases.md


 ``` js
 components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
 }
 ```

-Problem solved!
+Problème résolu !


!!! Top ! C'est plus clair que lors de ma première lecture dans l'original ce passage. Merci !

MachinisteWeb · 2018-04-23T07:09:25Z

src/v2/guide/components-edge-cases.md

  </div>
 </my-component>
 ```

-<p class="tip">However, <code>inline-template</code> makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the <code>template</code> option or in a <code>&lt;template&gt;</code> element in a <code>.vue</code> file.</p>
+<p class="tip">Cependant, <code>inline-template</code> rend le scope de vos templates plus difficile à appréhender. Une bonne pratique est de préférer la définition de templates à l'intérieur du composant en utilisant l'option <code>template</code> ou dans un élément <code>&lt;template&gt;</code> dans un fichier <code>.vue</code>.</p>


rend la portée de vos

MachinisteWeb · 2018-04-23T07:11:52Z

src/v2/guide/components-edge-cases.md


-### Cheap Static Components with `v-once`
+Cependant, si vous exclu toutes les options précédentes et que vous vous trouvez dans cette situation extrêmement rare où vous avez à forcer manuellement une mise à jour, vous pouvez le faire avec [`$forceUpdate`](../api/#vm-forceUpdate).


si vous excluez

oups, je voulais mettre si vous avez exclu

MachinisteWeb · 2018-04-23T07:12:19Z

src/v2/guide/components-edge-cases.md

@@ -349,33 +349,33 @@ Vue.component('hello-world', {
 })
 ```

-<p class="tip">These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.</p>
-


que veux-tu dire ?

Il y a un décallage de ligne près de ce point dans le nombre de ligne, désolé pour la clarté

Je ne vois pas de décalage dans le diff, le nombre de lignes est identique

Oui apparemment plus loins ça retombe sur ces pates

MachinisteWeb · 2018-04-23T11:43:00Z

src/v2/guide/components-edge-cases.md

@@ -349,33 +349,33 @@ Vue.component('hello-world', {
 })
 ```

-<p class="tip">These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.</p>
-


Oui apparemment plus loins ça retombe sur ces pates

MachinisteWeb · 2018-04-23T11:43:56Z

src/v2/guide/components-edge-cases.md


+Faire le rendu d'éléments HTML statiques est très rapide dans Vue, mais parfois vous pouvez avoir un composant qui contient **une grande quantité** de contenu statique. Dans ces cas, vous pouvez vous assurer qu'il ne sera évalué qu'une seule fois puis mis en cache en ajoutant la directive `v-once` à l'élément racine, comme ceci :
+
 ``` js


À partir d'ici le décallage est réparé. C'est pour ça qu'au nombre de ligne ça ne se voit pas. Mais en regardant sous cette vue https://github.com/vuejs-fr/vuejs.org/pull/130/files, tu peux constater.

Je ne vois vraiment pas ce que je peux y faire, tout est à la même ligne mais le diff git s'y perd. Je pense que ça n'a aucune importance

MachinisteWeb · 2018-04-23T11:45:59Z

src/v2/guide/components-edge-cases.md


 ``` js
 beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
 }
 ```

-Or alternatively, you could use Webpack's asynchronous `import` when you register the component locally:
+Ou comme alternative, vous pouvez utiliser l'`import` asynchrone de Webpack lorsque vous inscrivez le composant localement :


Oui je sais qu'en version original Webpack garde la majuscule. Pour npm, il souhaite également conserver NPM. Je crois que sa règle c'est le terme qu'il pense le plus utilisé selon des critères trop arbitraires.

— vuejs#990

En tout cas en FR, notre règle c'est toujours utilisé la syntaxe de la documentation officielle. Node.js (pas de Node.JS), npm (pas de Npm ou NPM), GitHub (pas de Github), Webpack (pas webpack), SystemJS pas Sytem JS, etc.

Du coup dans toutes nos documentations FR, et tu peux vérifier, tu trouverras webpack et npm. Si tel n'est pas le cas « c'est une erreur ».

Rien de dramatique non plus encore une fois, juste une histoire de consistence.

Du coup ton avis sur ce billet m'intéresserait bien :)
— https://www.linkedin.com/pulse/d%C3%A9veloppeurs-marketeurs-respectez-les-noms-des-bruno-lesieur/

MachinisteWeb · 2018-04-27T14:48:05Z

Tu as fais tous les changements que tu jugeais nécéssaires @sylvainpolletvillard ? Dit moi quand je pourrais merge.

sylvainpolletvillard · 2018-04-27T19:15:00Z

Je n'avais pas eu le temps d'y revenir, mais c'est chose faite. Bon pour merge

MachinisteWeb · 2018-04-28T10:05:52Z

Top \o/

sylvainpolletvillard added 2 commits April 19, 2018 23:07

translate component-edge-cases (WIP)

2834c73

translate component-edge-cases

f3c7dd5

sylvainpolletvillard added the Relecture nécessaire label Apr 21, 2018

sylvainpolletvillard requested review from forresst, Kocal and MachinisteWeb April 21, 2018 17:58

MachinisteWeb reviewed Apr 23, 2018

View reviewed changes

MachinisteWeb assigned sylvainpolletvillard Apr 27, 2018

code review

384d22e

MachinisteWeb merged commit e8b46f4 into vuejs-fr:master Apr 28, 2018

MachinisteWeb mentioned this pull request May 10, 2018

Pages en cours de traduction #3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Traduction de `component-edge-cases` #130

Traduction de `component-edge-cases` #130

sylvainpolletvillard commented Apr 21, 2018

MachinisteWeb left a comment

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018 •

edited

Loading

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018 •

edited

Loading

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018

sylvainpolletvillard Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

MachinisteWeb Apr 23, 2018

sylvainpolletvillard Apr 27, 2018

MachinisteWeb Apr 23, 2018 •

edited

Loading

MachinisteWeb commented Apr 27, 2018

sylvainpolletvillard commented Apr 27, 2018

MachinisteWeb commented Apr 28, 2018


		Earlier, when we described [Accessing the Parent Component Instance](#Accessing-the-Parent-Component-Instance), we showed an example like this:
		Précédemment, quand nous avons décrit l'[accès à l'instance de composant parente](#Accessing-the-Parent-Component-Instance), nous avons montré un exemple comme ceci :


		<p class="tip">However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as <a href="#Accessing-the-Root-Instance">using <code>$root</code></a> for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like <a href="https://github.com/vuejs/vuex">Vuex</a> instead.</p>
		<p class="tip">Cependant, il y a des inconvénents à l'injection de dépendances. Cela vient entériner la manière dont les composants sont actuellement organisés dans votre application, rendant plus difficile le remaniement de code. De plus, les propriétés fournies avec `provide` ne sont pas réactives. Cela a été intentionnellement conçu de cette façon, car les utiliser pour créer un espace de stockage global est tout aussi peu évolutif que <a href="#Accessing-the-Root-Instance">d'utiliser <code>$root</code></a> dans le même but. Si les propriétés que vous voulez partager sont spécifiques à votre application et non génériques, ou si jamais vous voulez mettre à jour des données fournies par des ancêtres, alors c'est un signe que vous avez probablement besoin d'une réelle solution de gestion d'état telle que <a href="https://github.com/vuejs/vuex">Vuex</a> à la place.</p>


		<p class="tip">Note that Vue's event system is different from the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>. Though they work similarly, <code>$emit</code>, <code>$on</code>, and <code>$off</code> are <strong>not</strong> aliases for <code>dispatchEvent</code>, <code>addEventListener</code>, and <code>removeEventListener</code>.</p>
		<p class="tip">Notez que le système d'événements de Vue est différent de celui de <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">l'API EventTarget</a> du navigateur. Bien qu'ils fonctionnent de façon similaire, <code>$emit</code>, <code>$on</code>, et <code>$off</code> ne sont <strong>pas</strong> des alias pour <code>dispatchEvent</code>, <code>addEventListener</code>, et <code>removeEventListener</code>.</p>


		### Cheap Static Components with `v-once`
		Cependant, si vous exclu toutes les options précédentes et que vous vous trouvez dans cette situation extrêmement rare où vous avez à forcer manuellement une mise à jour, vous pouvez le faire avec [`$forceUpdate`](../api/#vm-forceUpdate).


		Faire le rendu d'éléments HTML statiques est très rapide dans Vue, mais parfois vous pouvez avoir un composant qui contient une grande quantité de contenu statique. Dans ces cas, vous pouvez vous assurer qu'il ne sera évalué qu'une seule fois puis mis en cache en ajoutant la directive `v-once` à l'élément racine, comme ceci :

		``` js

Traduction de component-edge-cases #130

Traduction de component-edge-cases #130

Conversation

sylvainpolletvillard commented Apr 21, 2018

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

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 Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb Apr 23, 2018 • 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

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 Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

MachinisteWeb commented Apr 27, 2018

sylvainpolletvillard commented Apr 27, 2018

MachinisteWeb commented Apr 28, 2018

Traduction de `component-edge-cases` #130

Traduction de `component-edge-cases` #130

MachinisteWeb Apr 23, 2018 •

edited

Loading

MachinisteWeb Apr 23, 2018 •

edited

Loading

MachinisteWeb Apr 23, 2018 •

edited

Loading