중첩 된 템플릿을 사용하여 각 요소의 자식을 표시하는 템플릿 구조가 있습니다. 그것은 지금까지 작동하고 있습니다.
또한 아이콘 클릭 ( click .fa-edit) 에 대한 이벤트가 있습니다. 첫 번째 수준에서 해당 아이콘을 클릭하면 모든 것이 작동하지만 중첩 된 요소를 클릭하면 클릭으로 여러 이벤트가 발생하므로 한 번의 클릭으로 여러 console.log가 표시됩니다. 나는 그것을 이해하지 못하기 때문에 그것을 방지하는 방법을 모릅니다.
기본 템플릿
<template name="main">
{{#if Template.subscriptionsReady}}
<div id="elements">
{{ > getElements parentId=id }}
</div>
{{else}}
<div class="loading">{{ > spinner }}</div>
{{/if}}
</template>
어린이 템플릿
<template name="getElements">
{{#each children}}
<div class="row">
<input type="text" name="keyword" value="{{value}}"><i class="fa fa-edit"></i>
</div>
{{#if subchilden}}
{{ > getElements parentId=id }}
{{/if}}
{{/each}}
</template>
이벤트
Template.getElements.events({
'click .fa-edit': function(event) {
console.log('click');
}
});
문제는 이벤트가 템플릿의 외부 요소에 위임된다는 것입니다.
이벤트가 발생하면 중첩 된 템플릿 ( 동일한 템플릿 ) 이 있기 때문에 상위 템플릿의 모든 외부 요소로 버블 링되며 해당 템플릿에도 포착됩니다.
이벤트의 버블 링을 방지해야합니다.
Template.getElements.events({
'click .fa-edit': function(event) {
event.stopPropagation(); // add this to stop the event from bubbling any further
console.log('click');
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다