Question

出于样式设计的目的，我想创建一个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？渲染后？

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对象

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

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

1 个答案: