Contexte des données Meteor dans les modèles et les assistants

Question

Essayer de mieux comprendre comment les contextes de données fonctionnent dans Meteor, car je ne peux pas comprendre ce problème auquel je suis confronté. Je n'ai pas trouvé de réponse claire nulle part. Je les modèles suivants

<template name="list"> 
    {{#each listItem}} 
    {{> listItemDetail}} 
    {{/each}} 
</template> 

<template name="listItemDetail"> 
    <p>{{_id}} {{title}}</p> 
    <p>{{idViaHelper}}</p> 
</template> 

Et dans mon Javascript j'ai

Template.list.helpers({ 
    'listItem':() => { 
     return List.find().fetch(); 
}) 

Template.listItemDetail.helpers({ 
    'idViaHelper':() => { 
     return this._id 
}) 

En ce qui concerne ma compréhension des contextes de données dans va Meteor, en utilisant #each définit le contexte pour chaque instance du modèle listItemDetail à être un document renvoyé par l'assistant listItem.

Et cela fonctionne comme je m'attendais quand il s'agit d'utiliser {{_id}} dans le modèle listItemDetail, montrant l'ID du document.

Mais si j'essaie d'obtenir le même _id via un assistant {{idViaHelper}} qui utilise this._id, j'obtiens undefined. Quand j'essaye console.log(this), il me montre que this fait référence à l'objet Window. Mais je n'ai aucune idée pourquoi. Que se passe-t-il et pourquoi le contexte de données n'est-il pas détecté dans l'assistant de modèle?

Ceci est mon premier message, merci pour votre aide!

Answer 1

Vous avez raison concernant le flux de données Meteor. Ce que vous faites fonctionne.

Vous oubliez seulement ce que le this représente dans une fonction lambda.

, veuillez lire la partie lexicales ce de MDN, il vaut mieux expliquer que ce que je pouvais dire: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Pour votre cas, la façon plus facile d'obtenir le datacontext directement à partir de votre ceci sur des aides est de passer par fonction anonyme habituelle.

Juste essayer:

Template.listItemDetail.helpers({ 
    'idViaHelper': function(){ 
     return this._id 
}) 

Voilà.

Vous n'avez pas de chance sur celui-ci, il n'y a aucun problème lié à Meteor ici.

Autre question connexe vous pourriez trouver utiles: meteor helper functions, lambdas and lexical this

Answer 2

Julien Leray est correct dans sa réponse au sujet this lexical. Vous perdez le contexte de données lors de l'utilisation d'expressions lambda. Cependant, Meteor vous offre les moyens d'accéder à vos données de modèle sans this lexical, à savoir .:

Template.list.helpers({ 
    'listItem':() => List.find().fetch(); 
}); 

Template.listItemDetail.helpers({ 
    'idViaHelper':() => Template.currentData()._id 
}); 

Vous pouvez utiliser à la fois Template.currentData() et Template.instance().data.

Notez également que si vous avez une expression lambda qui n'inclut qu'une seule instruction return, vous pouvez utiliser la syntaxe du raccourci comme je l'ai fait plus haut.

// ECMAScript 5 
var myFunc = function (a, b, c) { 
    return b * a - c; 
}; 

Devient:

// ECMAScript 6 
const myFunc = (a, b, c) => b * a - c;