テンプレート内の流行データコンテキスト対助手

Question

私が直面しているこの問題を理解できないので、データコンテキストがMeteorでどのように機能するかを理解しようとしています。どこでも明確な答えが見つかりませんでした。私は、以下のテンプレート

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

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

そして、私のJavaScriptで私はへlistItemDetailテンプレートのインスタンスごとに#eachセットのコンテキストを使用して、限り流星内のデータコンテキストの私の理解が行くよう

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

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

を持っているを持っていますlistItemヘルパーから返された文書である必要があります。

これは、listItemDetailテンプレートで{{_id}}を使用し、ドキュメントのIDを表示すると思います。

しかし、this._idを使用している{{idViaHelper}}のヘルパーで同じ_idを取得しようとすると、私はundefinedとなります。 console.log(this)を試すと、thisがWindowオブジェクトを参照していることがわかります。しかし、なぜ私は考えていない。何が起きているのですか、テンプレートヘルパーでデータコンテキストが取得されないのはなぜですか？

これは私の最初の投稿です。ありがとうございます！

Answer 1

あなたはMeteor datacontextの流れについて正しくあります。 あなたがやっていることは働いています。

thisがラムダ機能を表すことを忘れているだけです。

一部字句にMDNからこのを読んで、それが良いのは、私が言うことができるものより説明：あなたのケースのためにhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

を、ヘルパーにあなたのこれからの直接のDataContextを取得する簡単な方法がで渡すことです通常の無名関数。

ただ、試してみてください。それだ

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

を。

あなたはこれに不運があります。ここに流星に関連する問題はありません。

あなたが有用見つけることができる他の関連する質問：meteor helper functions, lambdas and lexical this

Answer 2

ジュリアンLerayは、字句thisに関する彼の答えで正解です。ラムダ式を使用すると、データコンテキストが失われます。しかし、流星は、あなたの語彙thisせずに、テンプレートデータにアクセスするための方法を提供していますすなわち：

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

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

あなたがTemplate.currentData()とTemplate.instance().dataの両方を使用することができます。

また、単一のreturn文だけを含むラムダ式がある場合は、上記のようにショートカット構文を使用できます。

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

は次のようになります。

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