censor(object, extra)
Description
Retourne une copie superficielle d'un objet en omettant les propriétés de cycle de vie et les propriétés personnalisées spécifiées.
var attrs = { one: 'two', enabled: false, oninit: function () {} };
var censored = m.censor(attrs, ['enabled']);
// {one: "two"}
Signature
censored = m.censor(object, extra)
Argument | Type | Required | Description |
---|---|---|---|
object | Object | Yes | L'objet (table de hachage clé-valeur) à partir duquel créer une copie. |
extra | Array<String> | No | Un tableau de noms de propriétés à exclure de la copie. |
returns | Object | L'objet original si aucune propriété n'est à exclure, sinon une copie superficielle de l'objet avec les propriétés spécifiées omises. |
Comment ça marche
En général, il est plus simple de spécifier directement les attributs souhaités. Cependant, il est parfois pratique de transmettre tous les attributs inconnus à un autre élément. Bien que cela puisse sembler justifié, cela peut entraîner un problème majeur avec les méthodes de cycle de vie, qui risquent d'être appelées deux fois.
function SomePage() {
return {
view: function () {
return m(SomeFancyView, {
oncreate: function () {
sendViewHit(m.route.get(), 'some fancy view');
},
});
},
};
}
function SomeFancyView() {
return {
view: function (vnode) {
return m('div', vnode.attrs, [
// !!!
// ...
]);
},
};
}
Cela peut sembler anodin, mais cela crée un problème : vous générez deux appels chaque fois que cette vue est affichée. C'est là que m.censor
intervient : il permet de supprimer l'attribut oncreate
afin qu'il ne soit appelé qu'une seule fois, assurant ainsi la stabilité de l'application et évitant des comportements inattendus.
// Corrigé
function SomeFancyView() {
return {
view: function (vnode) {
return m('div', m.censor(vnode.attrs), [
// ...
]);
},
};
}
Des problèmes similaires peuvent également survenir avec les keys (clés).
function SomePage() {
return {
view: function () {
return m(
Layout,
{
pageTitle: 'Some Page',
key: someKey,
},
[
// ...
]
);
},
};
}
function Layout() {
return {
view: function (vnode) {
return [
m('header', [m('h1', 'My beautiful web app'), m('nav')]),
m('.body', vnode.attrs, [
// !!!
m('h2', vnode.attrs.pageTitle),
vnode.children,
]),
];
},
};
}
Cela finirait par provoquer une erreur](../guide/keys.md#key-restrictions) car voici ce que Mithril.js voit lors de la création du vnode Layout
:
return [
m('header', [m('h1', 'My beautiful web app'), m('nav')]),
m('.body', { pageTitle: 'Some Page', key: someKey }, [
m('h2', 'Some Page'),
[
/* ... */
],
]),
];
Cela peut facilement passer inaperçu, surtout dans des scénarios complexes impliquant une indirection ou d'autres subtilités. Pour corriger cela, il faut également omettre l'attribut key
. L'attribut personnalisé pageTitle
peut également être omis, car il n'apporte aucune valeur ajoutée au DOM.
// Corrigé
function Layout() {
return {
view: function (vnode) {
return [
m('header', [m('h1', 'My beautiful web app'), m('nav')]),
m('.body', m.censor(vnode.attrs, ['pageTitle']), [
m('h2', vnode.attrs.pageTitle),
vnode.children,
]),
];
},
};
}