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">×</a> </template>

然后在foundationInner上注册所有事件处理程序（相对于其父视图没有被移动）。

当然，如果基金会没有发生任何脱离和重新连接，那么这完全是另一回事。有关此问题的更多信息here。

Answer 2

    Template.foundation.rendered = function() {
       // your code to show the modal
       $("#userprofile").foundation("reveal","open");

    }

基础模态事件不起作用

2 个答案: