如何在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在“事件名稱”下提供了您可以使用的所有事件的列表。