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

【问题标题】：How do I add a specific element to the DOM in Ember.js?如何在 Ember.js 中向 DOM 添加特定元素？
【发布时间】：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？渲染后？

【问题讨论】：

标签： javascript css user-interface view ember.js

【解决方案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 在“事件名称”下列出了您可以使用的所有事件。

【讨论】：