From c32d508de130be5ba70245682b5ccca10fd5cf88 Mon Sep 17 00:00:00 2001 From: Henrik Myntti Date: Thu, 30 Mar 2017 18:46:42 +0200 Subject: [PATCH] Improve keys example The previous example about hiding keys had syntax errors, and example in itself didn't follow our own guidelines (key should be on immediate child of an array) In the new example we reuse the code from the previous example but break out a User component (which is much more likely) and the example says to move the key from inside the user component instead --- docs/keys.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/keys.md b/docs/keys.md index d6b16f8c..0ad0b0c5 100644 --- a/docs/keys.md +++ b/docs/keys.md @@ -96,21 +96,21 @@ users.map(function(u) { #### Avoid hiding keys in component root elements -If you refactor the code and put the button inside a component, the key must be moved out of the component and placed back where the component took the place of the button. +If you refactor the code and make a user component, the key must be moved out of the component and put on the component itself, since it is now the immediate child of the array. ```javascript // AVOID -var Button = { +var User = { view: function(vnode) { - return m("button", {key: vnode.attrs.id}, u.name) + return m("div", { key: vnode.attrs.user.id }, [ + m(Button, vnode.attrs.user.name) + ]) } } // PREFER users.map(function(u) { - return m("div", [ - m(Button, {key: u.id}, u.name) // key should be here, not in component - ]) + return m(User, { key: u.id, user: u }) // key should be here, not in component }) ``` @@ -195,12 +195,12 @@ users[0].key = 'c' // AVOID users.map(function(user){ // The component for John will be destroyed and recreated - return m(UserComponent, user) + return m(UserComponent, user) }) // PREFER users.map(function(user){ // Key is specifically extracted: data model is given its own property - return m(UserComponent, {key: user.id, model: user}) + return m(UserComponent, {key: user.id, model: user}) }) ```