如何在 Ember.js 中向 DOM 添加特定元素？

Posted 2023-02-26

【中文标题】如何在 Ember.js 中向 DOM 添加特定元素？

【英文标题】：How do I add a specific element to the DOM in Ember.js?

【发布时间】：2014-01-29 21:19:47

【问题描述】：

出于样式目的，我想创建一个 div，当悬停在不同的 div 上时，它充当叠加层。

我计划使用自定义事件在一个元素上捕获 MouseIn 和 MouseOut。

然后在每个其他部分之前创建 div 以充当叠加层，将它们显示为失焦。

基本上，在我的模板中，我有

#each answers
    render "simpleSearchAnswer" this
/each

那个子视图模板是：

<li class="questioncontainer">
    <div action "select" this class="questiontile">
        <div class="row questiontitle">
            <p><span>title</span>
            <i class="icon-info-circled"></i></p>
        </div>
        <div class="row questiondescription">
            <p><span>description</span>
            </p>
        </div>
    </div>
</li>

我想在顶部添加一个新的 div 作为叠加层，比如

<li class="questioncontainer">
    <!-- NEW STUFF BELOW-->
    <div class="overlay"></div>
    <!-- NEW STUFF ABOVE -->

    <div action "select" this class="questiontile">
        ....

但是在渲染之后，而不是之前，当用户使用应用程序时。

我想，基本上我要问的是，是否可以使用 Ember.js 动态添加 div？渲染后？

【参考方案1】：

您可以为“simpleSearchAnswer”定义一个自定义视图，定义 MouseEnter 和 MouseLeave 方法，然后使用 JQuery 来完成您需要做的事情。

类似：

App.SimpleSearchAnswerView = Em.View.extend(

    mouseEnter: function ()
        //jquery to add your div
    ),

    mouseLeave: function ()
        //jquery to remove your div
    )

);

您可以使用 this.$() 访问您的视图的 Jquery 对象

http://emberjs.com/api/classes/Ember.View.html 在“事件名称”下列出了您可以使用的所有事件。