유성, 부모 템플릿

에서 아이 템플릿의 통화 기능 내가 AVEC 아이 템플릿 Content 만 버튼이있는 부모 템플릿 Container있는 경우 : callback에 함수를 전달할 수있는 경우유성, 부모 템플릿

<head> 
    <title>test</title> 
</head> 

<body> 
    {{> Container}} 
</body> 

<template name="Container"> 
    {{# Content callback = callBack }} 
     <button>ok</button> 
    {{/Content}} 
</template> 

<template name="Content"> 
    {{> UI.contentBlock}} 
</template>

합니다. 이와 같이 :

Template.Container.helpers({ 
    callBack: function() { 
     return function() { 
      console.log('this is my callback'); 
     } 
    } 
});

그래서 내 콘텐츠 템플릿에서 부모 템플릿의 함수를 호출 할 수 있습니다. 예를 들면 다음과 같습니다.

Template.Content.events({ 
    'click button': function (e, tmpl) { 
     tmpl.data.callback(); 
    } 
});

하지만 때로는 다른 방식으로 처리해야합니다. 자식이 함수를 호출하는 부모. 그것을하는 당신의 방법은 무엇입니까?

편집 :

내가 행동과 포크로 쉽게 만드는을 보여주기 위해 meteorpad에 저장된 : 더 선호 같이 유성과 내 경험을 바탕으로 http://meteorpad.com/pad/48NvCFExxW5roB34N/test-pass-callback-to-parent

출처

2014-12-01 fabien

다음은 사용할 수있는 패턴입니다. Child 클래스와 child 템플릿을 정의하십시오. 아이디어는 child 템플릿 내부에서 데이터 컨텍스트가 Child 인스턴스라는 것입니다. 예를 들어 버튼을 눌러 숫자를 증가시킬 수있는 구성 요소를 만듭니다. 부모의 created 콜백에서

function Child() { 
    this.number = new ReactiveVar(0); 
} 

Template.child.events({ 
    "click .increment": function() { 
    this.number.set(this.number.get() + 1); 
    } 
});

<template name="child"> 
    <button class="increment">{{number.get}}</button> 
</template>

는 Child 인스턴스를 생성하고 템플릿 인스턴스에 저장합니다.

Template.parent.created = function() { 
    this.childInstance = new Child(); 
} 

Template.parent.helpers({ 
    childInstance: function() { 
    return Template.instance().childInstance; 
    } 
});

<template name="parent"> 
    {{> child childInstance}} 
</template>

지금 당신이 Child 프로토 타입에 메소드를 정의하고 예를 들어, 부모 템플릿에서 그들을 호출 할 수 있습니다 : 그런 다음 부모 템플릿, 데이터 컨텍스트로 Child 전달, child를 호출 : 또 다른 경우에 작동 할 수

Child.prototype.getNumberTimesTwo = function() { 
    return this.number.get() * 2; 
}

<template name="parent"> 
    {{> child childInstance}} 
    That number multiplied by two is: {{childInstance.getNumberTimesTwo}} 
</template>

출처

2014-12-02 09:19:30 user3374348

이벤트 이미 터를 위와 같이 자식 템플릿에 전달하기 전에 템플릿 간의 통신에 [이벤트 이미 터] (https://github.com/Olical/EventEmitter)를 사용했습니다. 아주 잘 작동합니다. 자식 템플릿은 부모 템플릿에서 수신 할 이벤트를 방출 할 수도 있습니다. – nephets

, 그것은 보인다 이벤트 주도 UI 디자인 즉, 부모 또는 자식 메서드를 직접 직접 호출하지는 않지만 사용자 지정 이벤트를 발생 시키거나 Session 변수를 설정합니다. 콜백 메소드가 언제 'button.lastClickTime'세션 값이 설정되어 있는지 호출 할 수 있도록 세션 개체가 반응성이

Template.Container.helpers({ 
    callBack: function() { 
     Session.get('button.lastClickTime'); 
     console.log('this is my callback'); 
    } 
}); 
Template.Content.events({ 
    'click button': function (e, tmpl) { 
     Session.set('buttom.lastClickTime', new Date()); 
    } 
});

: 그래서 당신처럼 뭔가를 할 수 있습니다.

그러면 부모로부터 자식에게 알리기 위해 set/get 호출을 되돌릴 수 있습니다.

Template.Container.events({ // 'Container' is the parent template 
    'click button': function (e, tmpl) { // Selector for an element in the child-template* 
     // You will now have access to the parent's context instead of the child's here. 
    } 
});

*) 가정이 있습니다 번호 :

출처

2014-12-01 17:04:09 desposi1

이 같은 아이 템플릿의 요소와 일치하는 선택기를 사용하여 아이 템플릿에서 이벤트를 트리거 부모 템플릿에 이벤트 핸들러를 등록 할 수 있습니다 상위 템플릿의 다른 버튼 그렇다면 버튼에 고유 한 이름을 지정하여 부모에서 고유하게 선택할 수 있습니다.

출처

2014-12-01 17:11:16

. 하지만 광산에서 'Content'는 구성 요소이며 상위 템플릿에 여러 번 나타납니다. 그리고 목표는 부모로부터 자식 컨텍스트에 액세스하고 자식의 부모에 액세스하지 않는 것입니다. – fabien

유성, 부모 템플릿

답변

관련 문제