2017-03-29 3 views
0

Marko.js 구성 요소에서 값과 함께 이벤트를 내보내려는 경우 포함 된 구성 요소에서 이벤트를 수신하여 값에 액세스하려고합니다.Marko.js로 값을 방출하는 올바른 방법

class { 
 
    doSomething() { 
 
     this.emit('buttonClicked', {someValue:'10'}); 
 
    } 
 
} 
 

 
<button.example-button on-click('doSomething')>Click me!</button>

포함하는 구성 요소는 다음과 같습니다 ...

class { 
 
\t onButtonClicked(data){ 
 
\t \t console.log("I heard event:" + data.someValue); 
 
\t } 
 
} 
 

 
<div class="button-manager"> 
 
    <my-button on-buttonClicked('onButtonClicked') /> 
 
</div>

:

나는 다음과 같습니다 간단한 버튼 구성 요소가 0

이 값을 사용하여 이벤트를 올바르게 기록합니다. 그 후 추적합니다 그러나 그러나 나는

<div class="button-manager"> 
 
    <my-button on-buttonClicked('onButtonClicked', data) /> 
 
</div>

...이 같은 ... 이벤트 리스너에 전달 된 인수를 참조 할 컨테이너의 구문을 기대하는 것처럼 조금 혼란 스러워요 빈 객체. 문자열을 기록한 인수로 문자열을 넣으면 이미 터에서 전달 된 원래 데이터 인수를 덮어 씁니다.

의도 한 동작입니까?

답변

1

을 감안할 때 다음과 예 계속 :

class { 
    onButtonClicked(foo, bar, eventArg){ 
     console.log('foo:', foo); 
     console.log('bar:', bar); 
     console.log('eventArg:', eventArg); 
    } 
} 

$ var foo = 'foo'; 
$ var bar = 'bar'; 

<div class="button-manager"> 
    <my-button on-buttonClicked('onButtonClicked', foo, bar) /> 
</div> 

이 출력은 buttonClicked에 다음을 방출 할 것이다 : 이벤트 핸들러 메소드 이름 경과

foo: foo 
bar: bar 
eventArg: { someValue: 10 } 

추가 인수 것 인수의 시작 부분에서 이벤트 핸들러 메소드로 전달 될 수 있습니다. 참조 : http://markojs.com/docs/components/#codeon-eventmethodname-argscode

사이드 참고 : 이것은 당신이 (this.emit()를 호출 할 때 제공되지 않은 데이터) 이벤트 처리기 메서드에 전달할 원 추가 데이터가 아닌 이상 Function.prototype.bind

의 동작을 반영하도록 한 후 추가 인수를 구속 할 필요가 없습니다.

귀하의 질문에 대한 답변입니다.

관련 문제