Meteor：使用弹出窗口和模态框答案

【问题标题】：Meteor: working with popups & modalsMeteor：使用弹出窗口和模态框
【发布时间】：2014-12-29 02:42:14
【问题描述】：

我有这个代表公司文章的模板。

<template name="articleDetail">

<section class="articles">

    {{#with articleData}}

    <article>

        <div>

            <div>

                <div class="logo">{{logo}}</div>
                <div class="name">{{name}}</div>

            </div>

        </div>

    </article>

    {{/with}}

</section>

这个模板从这个助手接收数据：

    Template.articleDetail.articleData = function(){

        return articleDB.findOne({_id:Session.get("clickedOnArticle")})

    }

文章显示为弹出窗口。当用户点击一篇文章（来自文章列表）时，详细文章（上面的模板）会显示一个 display:block。

我为此使用了这个事件：

    Template.articleOverview.events({

        "click .article":function(event, template){

            Session.set("clickedOnArticle", event.currentTarget.getAttribute("data-article-id"))

            $(".adArticle").addClass("active")

        }

    })

问题是我必须在一篇文章上点击 2 次。

第一次单击将模板注入到 dom 中
第二次单击添加“活动”类。

我在这里做错了什么？

谢谢，

【问题讨论】：

我唯一能想到的是，当您尝试将类添加到 DOM 时，并没有注入该元素，因为它需要超过 50ms~ 来构建和 addClass已经被调用。如果你把它包裹在setTimeout(function(){ $('.adArticle').addClass('active');}, 1000); 中，它会起作用吗？

标签： jquery templates meteor addclass

【解决方案1】：

解决方案相当简单：

{{#with articleData}} 块最初为 false，因此模板的 html 未呈现到页面。

当我点击一篇文章时，{{#with articleData}} 返回 true（因为现在里面有数据）但我必须再次点击才能触发 jquery（添加类 .active） .

所以关键是在加载页面而不是点击时获取 adArticles 模板。为此，如果来自 db 的查询返回 false，我只返回 true。

    Template.adArticles.articleData = function(){

        return tikiDB.findOne({_id:Session.get("clickedOnArticle")}) || true

    }

所以唯一改变的是||真正的位，现在一切都按预期工作。不过，我确实想知道是否有其他解决方案。

【讨论】：