meteor - 基础模态事件不起作用

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");

    },
});

他们没有开火，任何人都面临同样的问题。

我试图将所有模式代码放在父模板中并绑定(bind)事件，这也不起作用

Answer 1

很有可能，像 Semantic-UI 和其他一些框架一样，Foundation modals 被从 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 上注册所有事件处理程序(相对于其父 View 不会移动)。

当然，如果在 Foundation 中没有发生分离和重新连接，那么这完全是另外一回事。更多关于这个问题 here .