2016-09-23 2 views
0

Meteor에서 데이터 컨텍스트가 작동하는 방식을 더 잘 이해하기 위해이 문제를 해결할 수 없습니다. 아무데도 명확한 대답을 찾지 못했습니다. 내가 #each를 사용하여 다음 템플릿 템플릿 내의 유성 데이터 컨텍스트

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

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

그리고 내 자바 스크립트에서

나는 유성가는 내 데이터 컨텍스트에 대한 이해로 지금까지

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

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

을 가지고는 listItemDetail 템플릿의 각 인스턴스에 대한 컨텍스트를 설정 listItem 도우미에서 반환되는 문서 여야합니다.

listItemDetail 템플릿에서 {{_id}}을 사용하여 문서의 ID를 표시 할 때 예상대로 작동합니다.

을 도우미 {{idViaHelper}} (this._id)을 사용하여 얻으려고하면 undefined이됩니다. console.log(this)을 시도하면 this이 Window 개체를 나타내는 것입니다. 그러나 나는 이유를 모른다. 무슨 일이 벌어지고 왜 데이터 컨텍스트가 템플릿 도우미에서 선택되지 않습니까?

이것은 내 첫 번째 게시물입니다. 감사합니다.

답변

1

당신은 Meteor datacontext 플로우에 관한 것입니다. 당신이하고있는 일이 효과가 있습니다.

이 람다 함수를 나타내는 것을 잊어 버릴뿐입니다. 도우미에이에서 직접 데이터 컨텍스트를 얻을 수 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 사건에 대한

, 쉬운 길을 통과하는 것입니다 :

가 MDN에서 부분 어휘이을 읽고, 내가 말할 수있는 무엇을 더 나은보다 설명입니다 일반적인 익명 기능.

그냥 시도 : 그것 뿐이다

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

합니다.

이 게임에 불운이 있습니다. 유성과 관련된 문제는 없습니다. 당신이 유용 할 수

기타 관련 질문 : meteor helper functions, lambdas and lexical this

+0

감사합니다 줄리앙. 나는 화살 함수가 ES2015에서 구문 적으로 변화 한 것이라고 생각했다. (그리고 함수를 선언하는 예전의 방식은 더 이상 사용되지 않을 것이다.) 기술적 인 차이점과 두 가지 모두에 대한 사용이 있을지도 모르겠다. – TL77

0

줄리앙 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;