基础模态事件不起作用

Question

我的代码

{{#with profile}}

        {{> foundation}}
{{/with}}


<template name="foundation">
    <div id="userprofile" class="reveal-modal" data-reveal>
         <h2 id="selectedProfileName">{{name}}</h2>
        <div class="large-12 columns paddingtop">
            <div class="large-3 columns">
                <img id="selectedProfilePicture" src="{{picurl}}" />
                <p id="selectedProfileLink" ><a href="/accounts/profile/{{_id}}" >Open Profile</a></p>
            </div>
        </div>
        <div class="columns right">
            <div id="btnCancel" class="btnCancel button button-register small">Cancel</div>
            <div id="btnConfirm" class="btnConfirm button button-register small" data={{_id}}>Okay</div>
        </div>      
        <a class="close-reveal-modal">&#215;</a>
    </div>
</template>

我正在使用JS打开模态

$("#userprofile").foundation("reveal","open");

我的活动是

Template.foundation.events({
    'click .btnConfirm':function(evt){
        console.log("confirm");
        $('#curator_name').val("");
        $('#confirmationText').html("");
    },
    'click .btnCancel':function(){
        console.log("close");

    },
});

他们没有解雇,任何人都面临同样的问题.

我试图将所有模态代码放在父模板中并绑定事件,这也无法正常工作

Answer 1

像Semantic-UI和其他一些框架一样,很可能会从DOM中删除基础模态,并以编程方式添加到其他地方(比如在主体的末尾).如果是这种情况,那么在封闭模板上注册的事件处理程序将无法再找到它们.

解决方案是在模态中定义模板,并将事件附加到该模板.就像是:

<template name="foundation">
  <div id="userprofile" class="reveal-modal" data-reveal>
    {{> foundationInner}}  
  </div>
</template>

<template name="foundationInner">
  <h2 id="selectedProfileName">{{name}}</h2>
  <div class="large-12 columns paddingtop">
    ...
  </div>      
  <a class="close-reveal-modal">&#215;</a>
</template>

然后注册所有事件处理程序foundationInner(相对于其父视图不会移动).

当然,如果在基金会没有发生分离和重新连接,那么这完全是另一回事.关于这个问题的更多信息.