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

Question

出于样式目的，我想创建一个div，当另一个div悬停在其上时，该div用作覆盖。

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

然后在每个其他部分之前创建div以用作覆盖，将它们显示为离焦。

本质上，在我的模板中

{{#each answers}}
    {{render "simpleSearchAnswer" this}}
{{/each}}

那个子视图模板thingie是：

<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？ 渲染后？

Answer 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对象this.$()

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