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,
]),
];
},
};
}